Ajax深入解析：send方法、setRequestHeader详解与XMLHttpRequest实战应用-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41296326/article/details/116784604

1.Ajax中send方法参数的使用

2.详解XMLHTTP中setRequestHeader方法和参数

新加：设置编码方法

语法

参数

3.在Ajax技术中XMLHttpRequest的五步使用法

1.Ajax中send方法参数的使用

当get时，open中的url拼好参数，send中不传参数
当post时，open中不带参数，send中传入参数
Ajax中send方法参数的使用

一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null。

例如：

var url = "login.jsp?user=XXX&pwd=XXX";

xmlHttpRequest.open("GET",url,true);

xmlHttpRequset.send();

此外，也可以使用send方法传递参数。使用send方法传递参数使用的是POST方法，需要设定Content-Type头信息，模拟HTTP POST方法发送一个表单，这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方法。

例如：

xmlHttpRequest.open("POST","login.jsp",true);

xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");

xmlHttpRequest.send("user="+username+"&pwd="+password);

需要注意的是根据提交方式的不同，两种提交方式分别调用后台的doGet方法和doPost方法。

2.详解XMLHTTP中setRequestHeader方法和参数

新加：设置编码方法

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

语法

setRequestHeader(header, value);

参数

header字符串，请求头。

value 字符串，值。

还是不很明白?

1.CONTENT-TYPE是什么意思，application/x-www-form-urlencoded是什么意思？

2.下面几句setRequestHeader的含义？

setRequestHeader("Content-type", "application/x-www-form-urlencoded");

setRequestHeader("Content-length", paramsSend.length);

setRequestHeader("Connection", "close");

通常在HTTP协议里，客户端像服务器取得某个网页的时候，必须发送一个HTTP协议的头文件，

告诉服务器客户端要下载什么信息以及相关的参数，如：

GET /bb.asp?www=1234 HTTP/1.1

Accept: */*

Accept-Language: zh-cn

UA-CPU: x86

Accept-Encoding: gzip, deflate

User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

Host: www.e4j.cn:89

Connection: Keep-Alive

Cookie: %C3%F7%CC%EC=%B0%CB;ASPSESSIONIDASDBSDRR=BLEDBIBBCGKBJAKJCFEJKGII

而 XMLHTTP 就是通过HTTP协议取得网站上的文件数据的，所以也要发送HTTP头给服务器。

但是 XMLHTTP 默认的情况下有些参数可能没有说明在HTTP头里，这是当我们需要修改或添加这些参数时就用到了

setRequestHeader 方法。

就比如如果上面这段HTTP头文件内容是 XMLHTTP 提交默认的情况，当使用 setRequestHeader 方法后就这样，如：

XMLObject.setRequestHeader "CONTENT-TYPE", "application/x-www-form-urlencoded"

setRequestHeader "Connection", "close"

这时HTTP头信息就应该是上述的一串数据内容。

http有几种提交方式，其中比较常用的就是 GET 和 POST

这个标志就放在HTTP头开头的地方，这样讲容易理解点

GET 方式是没有提交内容的。

GET 传参数的方式就是通过虚拟地址传送，如:

GET /bb.asp?www=1234 HTTP/1.1

参数全部就只有 "www=1234" 这么多

3.在Ajax技术中XMLHttpRequest的五步使用法

在Ajax应用程序中，XmlHttpRequest对象负责将用户信息以异步通信地发送到服务器端，并接收服务器返回的响应信息和数据。
XMLHttpRequest简介
XMLHttpRequest可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请求数据，在页面加载后在服务器端接受数据，在后台向客户端发送数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。
XMLHttpRequest和Javascript
Javascript本身并未具备向服务器发送请求的能力，要么使用window.open()方法重新打开一个页面向服务器提交请求，要么使用XMLHttpRequest对象发送请求。不同的是，前者是普通的即同步交互模式，而后者是异步交互方式。
XMLHttpRequest提供了一系列的属性和方法，来向服务器发送异步的http请求；在服务器处理用户请求的过程中，XMLHttpRequest通过属性的状态值来实时反映http请求所处的状态，并根据这些状态指示Javascript做相应的处理；当服务器顺利完成响应用户行为的动作、并将响应数据返回时，XMLHttpRequest提供的response系列方法，可以将这些响应数据以文本、XML Document对象、Ado Stream对象或者unsigned byte数组的方式组装起来，提供给Javascript处理。
XMLHttpRequest的五步使用法：
1、建立XMLHttpRequest对象
2、注册回调函数
3、使用open方法社会自和服务器端交互的基本信息
4、设置发送的数据，开始和服务器端交互
5、在回调函数中判断交互是否结束，响应是否正确，并根据需要过去服务器端返回的数据，更新页面内容
下面我们以用户名确认来实现XMLHttpRequest的五步使用法：
<!DOCTYPE html>

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">

var xmlhttp;

function submit(){

//1.创建XHLHttpRequest对象

if(window.XMLHttpRequest){

//alert("IE7，IE8 ,FireFox。Mozillar、Safari，Opera");

//IE7，IE8 ,FireFox。Mozillar、Safari，Opera

xmlhttp=new XMLHttpRequest();

if(xmlhttp.overrideMimeType){

xmlhttp.overrideMimeType("text/xml");

}

}else if(window.ActiveXObject){

//IE6,IE6.5 IE5

alert("IE6,IE6.5 IE5");

var activexName= ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',

'MSXML2.XMLHTTP.4.0','msxml2.xmlhttp.3.0','MSXML2.XMLHTTP.2.0',

'MSXML2.XMLHTTP.1.0'];

for(var i=0; i<activexName.length;i++){

try{

xmlhttp=new ActiveXObject(activexName[i]);

break;

}catch(e){

}

}

}

if(xmlhttp==undefined||xmlhttp==null){

alert("当前浏览器不支持穿件XMLHttpRequest对象，请更换浏览器");

return;

}

//alert(xmlhttp);

//2.注册回调方法

xmlhttp.onreadystatechange=callback;

//错误的写法callback();

//记忆一个固定用法，获取文本框中用户输入的内容

var userName=document.getElementById("UserName").value;

/*

//GET方式交互

//设置和服务器端交互的相应参数

xmlhttp.open("GET","AjaxServer?name="+userName,true);

//4.设置向服务器端发送的数据，启动和服务器端的交互

xmlhttp.send();

*/

//POST方式交互

//3.设置和服务器端交互的相应参数

xmlhttp.open("POST","AjaxServer",true);

//POST方式交互所需要增加的代码

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//4.设置向服务器端发送的数据，启动和服务器端的交互

xmlhttp.send("name="+userName);

}

function callback(){

//5.判断和服务器端的交互是否完成，还有判断服务器端是否正确返回了数据

if(xmlhttp.readyState==4){

//表示和服务器端的交互已经完成

//服务器返回的http状态码

//200表示“成功”，404表示“未找到”。500表示“服务器内容部错误”

//alert(xmlhttp.status);

if(xmlhttp.status==200){

//表示服务器端的响应代码是200，正确的返回了数据

//纯文本数据的接受方法

var message=xmlhttp.responseText;

//XML数据对应的DOM对象的接受方法

//使用前提是，服务器端需要设置content-type为text/xml

//var domXml=xmlhttp.responseXML;

alert("bb");

//记忆想div标签填充文本内容的方法

var div=document.getElementById("message");

div.innerHTML=message;

}

}

}

</script>

</head>

<body>

<input type="text" id="UserName"/>

<input type="button" value="校验用户名" οnclick="submit()"/>

<br/>

<div id="message"></div>

</body>

</html>