JS原生AJAX

Posted weixin_49085046

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS原生AJAX相关的知识,希望对你有一定的参考价值。

1、什么是 AJAX ?
AJAX = 异步 javascript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。

2、Ajax的原理:

简单来说就是 通过XmlHttpRequest对象向服务器发异步请求,从服务器获得数据,然后用 javascript 来操作DOM更新页面的技术。

3、原生JS创建Ajax的五个步骤:
1.创建XMLHTTPRequest对象
2.使用open方法设置和服务器的交互信息
3.设置发送的数据,开始和服务器端交互
4.注册事件
5.更新界面

//创建 XMLHttpRequest 对象
var ajax = new XMLHttpRequest();
//规定请求的类型、URL 以及是否异步处理请求。
ajax.open('GET',url,true);
//发送信息至服务器时内容编码类型
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
//发送请求
ajax.send(null);  
//接受服务器响应数据
ajax.onreadystatechange = function () {
    if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) { 
    }
};

4、:json字符串转换集json对象、json对象转换json字符串

//字符串转对象
JSON.parse(json)
eval('(' + jsonstr + ')')   
// 对象转字符串
JSON.stringify(json)

5、ajax几种请求方式?他们的优缺点?
常用的post,get,delete。不常用copy、head、link等等。

代码上的区别
1:get通过url传递参数
2:post设置请求头  规定请求数据类型
使用上的区别
1:post比get安全
(因为post参数在请求体中。get参数在url上面)
2:get传输速度比post快 根据传参决定的。
(post通过请求体传参,后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)
3:post传输文件大理论没有限制 get传输文件小大概7-8k ie4k左右
4:get获取数据 post上传数据
(上传的数据比较多 而且上传数据都是重要数据。所以不论在安全性还是数据量级 post是最好的选择)

6、什么情况造成跨域?
同源策略限制 不同源会造成跨域。以下任意一种情况不同,都是不同源。

7、跨域解决方案有哪些?参考跨域解决方案.
1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享(CORS)
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

1)JSONP跨域

jsonp 的原理就是利用 <script>标签没有跨域限制,通过 <script>标签src属性,发送带有callback参数的GET请求,服务端将接口返回数据拼凑到callback函数中,返回给浏览器,浏览器解析执行,从而前端拿到callback函数返回的数据。

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参一个回调函数名给后端,方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);

    // 回调执行函数
    function handleCallback(res) {
        alert(JSON.stringify(res));
    }
 </script>

jsonp缺点:只能实现get一种请求。

6)跨域资源共享(CORS)

原理:服务器设置Access-Control-Allow-Origin HTTP响应头之后,浏览器将会允许跨域请求。若要带cookie请求:前后端都需要设置
限制:浏览器需要支持html5,可以支持POST,PUT等方法兼容ie9以上

以上是关于JS原生AJAX的主要内容,如果未能解决你的问题,请参考以下文章

原生js封装ajax代码

原生 JS Ajax,GET和POST 请求实例代码

原生JS写的ajax函数

JS原生Ajax

Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码

原生js 封装ajax请求超详细