博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js-ajax相关基础知识整理
阅读量:5292 次
发布时间:2019-06-14

本文共 2323 字,大约阅读时间需要 7 分钟。

ajax的核心是xmr对象,要调用的第一个方法是open(),他接受3个参数:要发送的请求类型("get","post")、请求的URL和表示是否异步发送请求的布尔值。

xhr("get",url,false);

调用open()方法并不会真正发送请求,而是启动一个请求已备发送,要发送特定请求,必须像下面这样调用send()方法

xhr.send(null);这个null对于某些浏览器是必须的。调用send()方法后,请求就会被分派到服务器。在收到响应后,响应的数据会自动填充xhr对象那个的属性,相关属性如下:

responseText:作为响应主体被返回的文本。

responseXML:如果响应的内容类型是:"text/html"或"application/xml",这个属性中将保存包含响应数据的xmldom文档。

status:响应的http状态(200表示成功,304表示请求的资源并没有修改 ,可以直接使用浏览器中缓存的版本),为了收到适当的响应,应该像下面这样检查上述两张状态代码:

statusText:http状态说明(ok,fail)。

if((xmlHttpReg.status>=200 && xmlHttpReg.status<300 )|| xmlHttpReg.status==304){                   // console.log(xmlHttpReg.responseText);                document.getElementById("resText").innerHTML = xmlHttpReg.responseText;                document.getElementById("box1").innerHTML = xmlHttpReg.status;            }else{                  console.log("fail"+xmlHttpReg.status)            }

根据返回的状态码,可以显示服务端返回的内容,我们建议通过status来决定下一步操作。

上面通过的是同步请求,如果要发送异步请求,我们需要检测readyState属性,该属性表示请求响应过程的当前活动阶段,这个属性可取的值如下:

0:未初始化,尚调用open()方法

1:启动,已经调用open()方法,但尚未调用send()方法;

2:发送,已经调用send()方法,但尚未接收到响应。

3:接收,已经接受到部分响应数据

4:完成,接受到全部数据,而且已经可以在客户端使用了,如下所示:

if(xmlHttpReg.readyState==4) {                if ((xmlHttpReg.status >= 200 && xmlHttpReg.status < 300 ) || xmlHttpReg.status == 304) {                    document.getElementById("resText").innerHTML = xmlHttpReg.responseText;                    document.getElementById("box1").innerHTML = xmlHttpReg.status;                   // console.log(xmlHttpReg.responseXML);                } else {                    console.log("fail" + xmlHttpReg.status)                }            }

只要readyState属性值由一个值变成另外一个值,都会触发onreadystatechange事件。

get请求最常用与向服务器查询某些信息,可以将字符串参数追加到url末尾,以便将信息发送到服务器,判断url后面的参数如下代码

function addURLParam(url,name,value){                url += (url.indexOf("?")==-1? "?":"&");                url +=encodeURIComponent(name)+"="+encodeURIComponent(value);                  return url;            }            var url = "b.txt",                url  = addURLParam(url,"name","zoumm");            xmlHttpReg.open("get", url, true);           // xmlHttpReg.setRequestHeader("myheader","myvalue");            xmlHttpReg.send(null);            xmlHttpReg.onreadystatechange = doResult; //设置回调函数

 post通常用于向服务器发送应该被保存的数据,post请求应该把数据作为请求的主体提交,

详细代码:

 

转载于:https://www.cnblogs.com/zoumiaomiao/p/4923131.html

你可能感兴趣的文章
模运算
查看>>
python多线程的使用
查看>>
团队编程项目作业1-成员简介及分工
查看>>
使用Chrome(PC)调试移动设备上的网页
查看>>
UI基础--手写代码实现汤姆猫动画
查看>>
Python+pytesseract+Tesseract-OCR图片文字识别(只适合新手)
查看>>
使用gitbash来链接mysql
查看>>
docker镜像管理基础
查看>>
黑盒测试和百合测试的优缺点对比
查看>>
SecureCRT的使用方法和技巧(详细使用教程)
查看>>
装饰者模式
查看>>
右侧导航栏(动态添加数据到list)
查看>>
用Nginx+Lua(OpenResty)开发高性能Web应用
查看>>
81、iOS本地推送与远程推送详解
查看>>
Sharepoint online 如何使用asp.net开发项目!!!
查看>>
C#基础_注释和VS常用快捷键(一)
查看>>
http协议
查看>>
动态调用webservice
查看>>
2017-05-18
查看>>
python带header
查看>>