Ajax详解

Posted 2021-02-15 it-ren

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

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

异步交互:客户端给服务器发送一个请求，服务器给客户端一个响应，响应回来的数据不会把原来的页面覆盖掉，这种我们称为异步交互。

 

 

 AJAX的应用

 1 //利用XMLHttpRequest对象去进行交互.
 2 //交互分为四步
 3 //1:创建对象
 4 var xhr=new XMLHttpRequest();
 5 //2:打开连接
 6 //提交方式，提交的地址
 7 xhr.open("get","login.php?username=zhangsan");
 8 //3:发送数据
 9 xhr.send(null);
10 //4:接收数据，只能通过异步的方式，就是只能通过回调函数的方式.
11 //时刻监听这服务器端状态的改变. onreadystatechange 也是xhr 的一个属性.
12 xhr.onreadystatechange=function(){
13          //服务器数据响应成功之后会调用这个函数.
14 
15         //因为我跟服务器进行交互，服务器会进行处理
16         //在处理的过程当中会不断的给我一些状态.  0,1,2,3，4
17         //每个状态代表的是不同的含义
18         //状态我通过xhr 去获取到试一下.
19         //readyState 属性去获取到
20         //如果状态等于 4 代表响应完成
21         if(xhr.readyState==4){  //响应完成.
22                 //console.log("响应完成") 如果响应的是200 才代表响应成功
23                 //我们要获取到服务器端状态吗.
24                 if(xhr.status==200){
25                     //真正的处理.
26                     //响应完成的，响应是成功的.
27                     //接收服务器端返回的数据.responseText 用来接收服务器响应的数据的
28                     var data=xhr.responseText;
29                     document.querySelector("span").innerhtml=data;
30                 }
31         }
32 }
33 
34 get 交互与post 交互需要注意的细节:
35 get 注意：请求的参数在地址栏当中，send 方法不能省略
36 post 注意需要有一个特殊的请求头 Content-Type: application/x-www-form-urlencoded
37 请求的参数写在send 里面