Ajax入门

简介

Ajax Asynchronous Javascript and XML,异步js和xml

XMLHttpRequest是js的一个外挂组件，用来实现客户端和服务端的异步通信，所有的ajax都要借助此组件才能成功。

XMLHttpRequest的使用

使用步骤

1,定义XMLHttpRequest实例对象
2,调用XMLHttpRequest对象的open方法，打开服务端URL的地址
3,注册onreadystatechange事件处理函数，准备接收响应并处理
4,调用XMLHttpRequest对象的send方法并发送数据

XMLHttpRequest的相关方法

var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.abort();//取消当前请求
xmlHttpRequest.getAllResponseHeaders();//获取全部的响应头
xmlHttpRequest.getResponseHeader("accept");//获取特定的响应头
xmlHttpRequest.open();//创建新的http请求，并指定请求的方法，url，验证消息(username,password)等。
xmlHttpRequest.send();//发送http请求到服务器，并接收相应的响应,
    在进行发送数据的时候，需要设置请求头:不设置客户端无法接收，不知道为声明
        xmlHttpRequest.setRequestHeader('Content-Type', "application/x-www-form-urlencoded");
xmlHttpRequest.setRequestHeader()//设置某个http头

XMLHttpRequest的相关属性

var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange //指定当readyState属性改变时的处理方法
xmlHttpRequest.readyState //返回当前的请求属性
xmlHttpRequest.response 
xmlHttpRequest.responseText //将响应当中字符串
xmlHttpRequest.responseXML  //将响应当中XML document对象来处理
xmlHttpRequest.responseURL  
xmlHttpRequest.status //返回当前请求的http状态
xmlHttpRequest.statusText //返回当前请求的响应行状体

XMLHttpRequest的open方法

xmlHttpRequest.open(method: string, url: string, async: boolean, username?: string | null, password?: string | null)
    method:请求的方法
    url:请求的URL，可以时绝对地址，也可以位相对地址。
    async:可选，boolean类型，是否位异步类型，默认位true，当状体改变时会调用onreadystatechange属性指定的回调函数。
    username:
    password:
    之后就可以使用send方法发送数据了，如果不传递消息，可以把参数设置为null
    open方法中的async设置为true，send方法会立即返回，async设置为false时，直到请求完成或超时才send方法才会响应。

xmlHttpRequest.readyState属性值的含义

1，尚未初始化，表示已经new对象，但是并没有调用open方法                                                            
2，初始化完毕，但是尚未调用send方法                                                                       
3，数据传输中，已经接收部分数据，因为响应及http头不全，response的部分数据会出错                                             
4，接收数据完毕，此时通过可以通过response获取响应数据。                                                           
当我们使用ajax，当没有判断readyState的值是否为4时，可能无法获取到数据。因为js代码已经执行到了，但是数据并没有响应到。                        
已经完整的ajax响应，要具备 xmlHttpRequest.readyState == 4 并且 xmlHttpRequest.status==200               

中止请求

在使用abort()方法之前，应该先清除onreadystatechange事件处理函数。把函数设置为null

获取json数据

使用xmlHttpRequest.responseText获取数据后，使用eval()方法可以解析成js对象，再从该对象中解析出需要的值。