JS中的ajax

AJAX

传统的web交换缺点：
1.流量损失 2.浪费时间和带宽

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

概念： ajax使网页异步刷新，在不重新加载整个页面时，对网页的局部进行刷新。
特点： 局部刷新；
最大的特点：局部刷新

ajax的优点：
1.局部刷新；
2,。优化了浏览器与服务器之间的传输，减少了不必要的数据返回，减少了带宽占用；
3.ajax引擎在客户端进行，承担部分服务器的工作，减少了服务器端的压力；

ajax的缺点
1.ajax不支持浏览器back按钮。
2.安全问题 AJAX暴露了与服务器交互的细节。
3.对搜索引擎的支持比较弱。
4.破坏了程序的异常机制。
5.不易调试。

ajax的使用方法
XMLHttpRequest 对象
XMLHttpRequest 是 AJAX 的基础。

1.实例化对象

var http=new XMLHttpRequest();

2.建立联系 open

open(method,url,async)

method：请求的类型；GET 或 POST
get(获取数据) post（新建 、增加数据） put（更新、 修改数据 、 删除数据）

url：文件在服务器上的位置（地址 ： 远程 地址和 本地地址）

async：true（异步）或 false（同步） 默认为true ， 异步； false 为同步。
?同步和异步的区别： 等待请求完成之后 在去执行 异步是：请求和后续代码同时执行

  http.open("get","./list/data.txt");

3.向服务器发送请求 send(content )

这个方法里面的参数可写可不写 ，写了是服务器传输数据 ,不写是请求数据。

 http.send();

send(string) 将请求发送到服务器。

string：仅用于 POST 请求

4.获取服务器响应的数据 （ 使用事件）
onreadystatechange
?responseText： 获得字符串形式的响应数据。
?response和responseText 的用法一样。
?readyState ：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

?status ：
500 ：服务器报错
200: “OK”
404: 未找到页面

  http.onreadystatechange=function(){
      /* console.log(http.response);  //数据
        console.log(http.readyState);*/  //读物的状态码  0 1 2 3 4
  if(http.readyState==4){
      var ajax1=JSON.parse (http.responseText);  //json转化字符串
    //  var ajax1=JSON.parse (http.response);  //json转化字符串
      console.log(ajax1);
  }
}

5.渲染界面

ajax 的异步和同步

?ajax同步 ： 意味着此时请求服务器后，JS代码不再继续执行，等待服务器返回后才继续往下执行。
我的理解是一种线性执行的方式，执行的流程不能跨越。一般用于流程性比较强的程序，我们做的用户登录功能也是同步处理的，必须用户通过用户名和密码验证后才能进入系统的操作

?ajax异步 ： 意味着此时请求服务器后，JS代码继续执行，不管服务器什么时候返回。

同步处理就是，说话后在吃饭，吃完饭后在看手机，必须等待上一件事完了，才执行后面的事情
比方说一个人边吃饭，边看手机，边说话，就是异步处理的方式。
异步的实现：使用回调函数callback（）
什么是回调函数？
回调函数是另外某件事结束时执行的一个函数。在Ajax中，回调函
数就是服务器对一个请求对象作出响应时调用的函数。浏览器会在
某个时刻”回调”这个函数。

每次服务器响应请求时就会由浏览器调用回调函数，即使此时服务器并没有完全处理完请求。大多数服务器都会做多次响应，指示接收到请求，或者正在处理请求，或者已经处理完请求。
就是因为这个原因，这个请求属性才被命名为onreadystatechange

每次服务器响应一个请求时，它会把请求对象readyState属性设置为一个不同的值。所以我们要特别注意这个属性，来确定服务器何时处理完我们发送给它的请求。

readyState属性是什么？

答：这是一个数，指示服务器处理进行到哪个阶段。初始值为0，服务器处理完一个请求时，这个属性的值将是4.
为什么每一次都必须检查呢？

答：因为每次准备状态改变时浏览器都会运行回调函数。由于服务器接收到请求时会把这个值设置为1，而在处理请求时有可能把这个值设置为2或3，所以除非readyState等于4，否则无法确定服务器是否处理完请求。

那么status属性呢？

答：这是HTTP状态码，如404就代表禁止访问，200代表成功。对请求对象做任何处理之前一定要确保状态码为200。

异步的回调函数使用

   var http =new XMLHttpRequest();
    http.open("get","txt/ajax.txt",true);
    http.send();
    function showdata(callback){
    http.onreadystatechange =function(){
        if(http.readyState ==4 && http.status ==200){
         callback (http.response);
        }
   }
}
    showdata (function(data){
        console.log(data);
    })

ajax的同步
以下这个小例子只能输出2，看出了同步只能等待服务器执行后才能往下执行代码。

  var http1=new XMLHttpRequest ();
    http1.open("get","./txt/ajax.txt",false);
    http1.send();
    http1.onreadystatechange=function(){
        if(http1.readyState==4 && http1.status==200){
            console.log(1);
        }
    };
           console.log(2);