Ajax-个人学习记录（2）

港控/mmm° 2022-06-14 08:36 221阅读 0赞

> — ***学习于`黑马14年9月-15年2月JAVAEE`视频教程***—

![这里写图片描述][SouthEast]

### **简介：** ###

AJAX ：Asynchronous JavaScript And XML指异步 JavaScript 及 XML  
不是新的语言，老技术JavaScript、XML、HTML、CSS的新用法。

### **同步 VS 异步：** ###

同步：  
![这里写图片描述][SouthEast 1]

异步：  
![这里写图片描述][SouthEast 2]

### **AJAX引擎：XmlHttpRequest对象（面试）** ###

JavaScript对象，目前大部分浏览器都支持。

1.  创建该对象：  
    ![这里写图片描述][SouthEast 3]
2.  属性：
    
     *  readyState：只读的。返回的是short类型。  
        作用：标识着XMLHttpRequest对象的当前状态。  
        0：未初始化  
        1：open方法已经调用了  
        2：send方法已经调用了  
        3：接收到了响应消息头，但没有接收到正文  
        **4：接收到了响应正文。响应结束**
     *  responseText：只读的。返回的是String  
        作用：接收服务器返回的文本类型的正文数据。
     *  responseXML：只读的。返回的是Document对象（JS中文档模型）  
        作用：接收服务器返回的XML类型的正文数据。
     *  status：只读的。返回的是short  
        作用：接收服务器返回的响应状态码
     *  statusText：只读的。返回的是String  
        作用：接收服务器返回的响应吗描述
3.  方法：
    
     *  getAllResponseHeaders():返回所有的响应消息头。是一个String字符串。
     *  getResponseHeader(headerName):返回指定头的值。是一个String字符串。
     *  open(String method,String url,boolean async):建立与服务器的链接。  
        method：请求方式。GET | POST  
        url：请求的服务器地址。  
        async：是否是异步。true是异步的。默认就是true。
     *  send(String data):发出请求。data参数是请求正文的内容数据。
     *  setRequestHeader(String headerName,String headerValue):设置请求消息头。
4.  事件处理器  
    onreadystatechange：指向一个函数，用于做事件处理。  
    XMLHttpRequest对象的readyState的每次变化都会触发onreadystatechange指向的事件处理器。

### **AJAX编码步骤：** ###

![这里写图片描述][SouthEast 4]

简单案例1：检查用户名是否可用  
![这里写图片描述][SouthEast 5]

另：对于服务器返回XML数据、服务器返回JSON数据：

[SouthEast]: /images/20220614/1c59d1c7c51641a78dc7059560848af5.png
[SouthEast 1]: /images/20220614/e525cae1f92c485b9e030647c7ddcb2b.png
[SouthEast 2]: /images/20220614/4b8810eafece4ca1881f6bb160adc7c0.png
[SouthEast 3]: /images/20220614/ecd55702fd404e48807133dd8aa5b6d8.png
[SouthEast 4]: /images/20220614/ea56c9e29d844952ab347bb9a70b1573.png
[SouthEast 5]: /images/20220614/60362e04b85948b3803eb5a9a9c5bd8d.png