JS-ajax详解

Ajax（ Asynchronous Javascript And XML）

注意同步和异步的区分

• 同步 sync： 首先，JS 是单线程的语言，所谓“单线程”就是一根筋，对于拿到的程序，一行一行的执行，前面的执行完成，后面的傻傻的等着。若前面的代码没执行完就会造成堵塞，后面的没法执行。

• 异步 async： 而AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。异步代码执行的时候就不会阻塞后面的代码执行。

• 记住： 同步执行代码总是优先于异步执行代码，同步代码在异步代码之前执行。

  • 因为碰到异步代码时，会将异步代码另行存到一个异步队列里面，然后将这个异步队列放到同步代码的最后，才执行
    例如：Ajax和setTimeout和setInterval这些是异步执行的

Ajax 优势:

1.不需要插件支持（一般浏览器且默认开启 JavaScript 即可）；
2.用户体验极佳（不刷新页面即可获取可更新的数据）；
3.提升 Web 程序的性能（在传递数据方面做到按需放松，不必整体提交）；
4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；

Ajax 的不足:

1.不同版本的浏览器度 XMLHttpRequest 对象支持度不足(比如 IE5 之前)；
2.前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会记录前后页面）；
3.搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容）；

json是一种数据格式，由对象，数组互相嵌套组成，属性名必须加双引号，数据传输格式

ajax.readyState:

0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了

HTTP 状态码 ajax.status

101——客户要求服务器根据请求转换HTTP协议版本
200——交易成功
304——客户端已经执行了GET，但文件未变化
306——前一版本HTTP中使用的代码，现行版本中不再使用
400——错误请求，如语法错误
404——没有发现文件、查询或UR
405——用户在Request-Line字段定义的方法不允许
500——服务器产生内部错误
505——服务器不支持或拒绝支请求头中指定的HTTP版本

GET，POST方式比较

只是不同的发送和请求数据的方式
GET：参数有长度限制，http://www.taobao.com?id=… , 明文传输
POST：参数无限制，放在请求体里, 更安全

// get方式
var ajax = new XMLHttpRequest();
ajax.open("GET","url",true);
ajax.send(null);
ajax.onreadystatechange = function(){
   
if(ajax.readyState == 4 && ajax.status == 200){
   
     var json = JSON.parse(ajax.responseText);
    fn(json);
}

// post方式
var ajax = new XMLHttpRequest();
ajax.open("POST","url",true);
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajax.send("name=zhangsan&age=18");
ajax.onreadystatechange = function(<