js原生ajax
window.onload=function(){
var xhr = new XMLHttpRequest();//第一步 创建xml对象
xhr.open("get","url地址");//第二步 调用open方法
xhr.responseType = 'json';//设置返回值得格式为json
// xhr.open('第一个参数是 请求方式的类型','第二个是url 地址')
xhr.send();//第三步 发送请求
xhr.onreadystatechange=function(){//第四步,执行,等待,状态改变,执行方法
if(xhr.readyState===4&&xhr.status===200){
console.log(xhr.response);//返回的数据类型是json数据
}
}
}
window.onload=function(){
var xhr = new XMLHttpRequest();//第一步 创建xml对象
xhr.open("post","http://www.liulongbin.top:3006/api/addcmt")
//第二步 xhr.open('第一个参数是 请求方式的类型','第二个是url 地址')
xhr.responseType = 'json';//设置返回值得格式为json
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // 第三步设置请求头
xhr.send("username=username&content=text");// 第四步send 方法 发送请求 携带请求数据
xhr.onreadystatechange=function(){// 第五步 等待执行 状态码发生改变
if(xhr.readyState===4&&xhr.status===200){
console.log(xhr.response);//返回的数据类型是json数据
}
}
}
ajax中的readyState
readyState表示xhr对象的请求状态,取值范围是0——4,分别表示5个不同的状态。
0:(未初始化)xhr对象已经创建,但还没有调用open()方法。值为0表示对象已经存在,否则浏览器会报错:对象不存在。
1 :(载入/发送请求)调用open()方法对xhr对象进行初始化,根据参数(method,url,true),完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
2 :(载入完成/响应接收)接收服务器端响应回的数据。但获得的还只是服务端响应的原始数据,并不能直接在客户端使用。值为2表示send()请求方法执行完成,并已经接收完全部的响应数据(未解析)。
3 - (交互/解析数据)正在解析从服务器端接收到的响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式,为在客户端调用作好准备。值为3表示正在解析数据。
4 - (后台处理完成)响应内容解析完成,可以在客户端调用了。此阶段确认全部数据都已经解析为客户端可用的格式,解析已经完成。值为4表示数据解析完毕,可以通过XMLHttpRequest对象的相应属性取得数据。
总之,整个XMLHttpRequest对象的生命周期应该包含如下阶段:
创建-0初始化请求-1发送请求-2接收数据-3解析数据-4完成 。
开发中默认使用”===”来避免抛出异常。
ajax中的status状态码
1xx:信息提示
100 继续。
101 切换协议。
201-206表示服务器成功处理了请求的状态代码,说明网页可以正常访问。
200(成功):服务器成功处理了请求。通常。这表示服务器成功提供了请求的网页;
201(已创建):表示请求成功且服务器已经创建了新的资源;
202(已接受):表示服务器已经接受了请求,但尚未对其进行处理;
203(非授权信息):表示服务器已经成功处理了请求,但返回了可能来自另一源的信息;
204(无内容):服务器成功处理了请求,但是未返回任何内容;
205(重置内容):服务器成功处理了请求,但是未返回任何内容;与204响应不同,此响应要求请求者重置文档视图(例如清楚表单内容输入新的内容);
206(部分内容):服务器成功处理了部分get请求;
300-307表示要完成请求,你需要进一步的操作,通常这些状态码都是永远重定向的。
300(多种选择):服务器根据请求可执行多种操作。服务器可根据请求者来选择一项操作,或提供操作列表供其选择;
301(永久移动):请求的网页已被永久的移动到新的位置。服务器返回此响应时,会自动将请求者转移到新的位置,你应使用此代码告诉搜索引擎网页或者网站已经被永久移动到新的位置;
302(临时移动):服务器目前正从不同的位置的网页响应请求,但请求者应继续使用原有的位置进行以后的请求。会自动将请求者转到不同的位置,但由于搜索引擎会继续抓取原有位置并将其编入索引,因此你不该使用此代码告诉搜索引擎网站或者网页已经被移动;
303(查看其它位置):当请求者应对不同的位置进行单独的get请求以检索响应时,服务器会返回此代码``。对于除head请求之外的所有请求,服务器会自动转到其他位置。
304(未修改):自从上次请求后,请求的网页没有被修改过。服务器返回此响应时,不会返回网页内容,如果网页自请求者上次请求之后再也没有更改过,你应当将服务器配置为返回此响应。由于服务器可以告诉搜索引擎自从上次抓取之后网页没有更改过,使用本地缓存,因此可以节约带宽和开销;
305(使用代理):请求者只能使用代理访问请求的网页。如果服务器返回此响应,那么服务器还会指明请求者应当使用的代理;
307(临时重定向):服务器目前正从不同位置的网页响应请求,但请求者应继续使用原有位置来继续以后的请求。会自动将请求者转到不同的位置,但由于搜索引擎会继续抓取原有位置并将其编入索引,因此你不该使用此代码来告诉搜索引擎某个网页或者网站已被移动;
400-417表示请求可能出错,会妨碍服务器的处理
400(错误请求):服务器不理解请求的语法;
401(身份验证错误):此页面要求授权。
403(禁止):服务器拒绝请求;
404(未找到):服务器找不到请求的网页,错误页面;
405(方法禁止):禁用请求中指定的方法;
406(不接受):无法使用请求的内容特性响应请求的网页;
407(需要代理授权):指定请求者必须授权使用代理。如果服务器返回此响应,还表示请求者应当使用代理;
408(请求超时):服务器等候请求时发生超时;
409(发生冲突):服务器在完成请求是发生冲突,服务器必须在响应中包含有关冲突的信息。
410(已删除):请求的资源永久删除;
411(需要有效长度):服务器不接受不含有效内容长度标头字段的处理;
412(未满足前提条件):服务器未满足请求者在请求中设置的其中一个前提条件;
413(请求实体过大):服务器无法处理请求,因为请求实体过大,超出服务器的请求范围;
414(请求的url过长):请求的url过长,服务器无法处理;
415(不支持的媒体类型):请求的格式不受请求页面的支持;
416(请求范围不符合要求):如果页面无法提供请求的范围,则服务器还会返回此状态码;
417(未满足期望值):服务器未满足期望请求的标头字段的要求;
500-505表示的意思是服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误,而不是请求出错。
500(服务器内部错误):服务器遇到错误,无法完成请求;
501(尚未实施):服务器不具备完成请求的功能;
502(错误网关):服务器作为网关或者代理,从上游服务器收到了无效的响应;
503(服务不可用):目前无法使用服务器;
504(网关超时):服务器作为网关或者代理,未及时从上游服务器接收请求;
505(http版本不受支持):服务器不支持请求中使用的http协议版本;