简介
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对象,再从该对象中解析出需要的值。
标签:XMLHttpRequest,入门,send,响应,Ajax,xmlHttpRequest,方法,请求 From: https://www.cnblogs.com/sinosecurity/p/16842334.html