AJAX请求的步骤

一.原生JS请求:
1.创建异步对象:

var xhr = new XMLHttpRequest();

2.设置 请求行 open(请求方式,请求url):

// get请求如果有参数就需要在url后面拼接参数,
// post如果有参数,就在请求体中传递 xhr.open("get","validate.php?username="+name)
xhr.open("post","validate.php");

3.设置请求(GET方式忽略此步骤)头:setRequestHeader():

// 1.get不需要设置
// 2.post需要设置请求头:Content-Type:application/x-www-form-urlencoded
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

4.设置请求体 send():

// 1.get的参数在url拼接了,所以不需要在这个函数中设置
// 2.post的参数在这个函数中设置(如果有参数)
xhr.send(null) xhr.send("username="+name);

5.让异步对象接收服务器的响应数据:

xhr.onreadystatechange = function(){ 
if(xhr.status == 200 && xhr.readyState == 4){ 
 console.log(xhr.responseText);
 }

注意:一个成功的响应有两个条件:1.服务器成功响应了 2.异步对象的响应状态为4(数据解析完毕可以使用了)

二.五个步骤连在一起的完整代码:
1.get:

var xhr = new XMLHttpRequest();
xhr.open("get","validate.php?username="+name);
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){ console.log(xhr.responseText); document.querySelector(".showmsg").innerHTML = xhr.responseText;;
 }
 }

2.post:

var xhr = new XMLHttpRequest();
xhr.open("post","validate.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username="+name);
xhr.onreadystatechange = function(){
// 判断服务器是否响应,判断异步对象的响应状态
if(xhr.status == 200 && xhr.readyState == 4){
 document.querySelector(".showmsg").innerHTML = xhr.responseText;
 }
 }

三.setRequestHeader的理解:
1.语法

oXMLHttpRequest.setRequestHeader(bstrHeader, bstrValue);
//bstrHeader:字符串,头名称。
//bstrValue:字符串,值。
setRequestHeader("Content-type", "application/x-www-form-urlencoded charset=utf-8"); 

setRequestHeader("Content-length", paramsSend.length); //Content-length 就是表示提交的数据字节大小 

setRequestHeader("Connection", "close");//关闭 

通常在HTTP协议里,客户端像服务器取得某个网页的时候,必须发送一个HTTP协议的头文件,告诉服务器客户端要下载什么信息以及相关的参数
eg:

setRequestHeader "a", "b"

虽然IIS不会报错,但这个信息也可以有用,可以在ASP程序里读取HTTP头信息分析是否有a: b;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章