Ajax异步请求-GET和POST

待我称王封你为后i 2022-07-14 07:44 177阅读 0赞

**Ajax异步请求**

**一、整体概览：**

![Center][]

**二、异步请求有五步：**

1.创建XMLHttpRequest对象

2.注册回调方法

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

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

5.回调判断

**三、GET与POST请求：**

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var xmlhttp; function submit(){ //1.创建XMLHttpRequest对象 if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); if(xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/xml"); } }else if(window.ActiveXObject){ //IE6，IE5，IE5.5 var activexName = ["MSXML 2.XMLHTTP.6.0","MSXML 2.XMLHTTP.5.0","MSXML 2.XMLHTTP.4.0","MSXML 2.XMLHTTP.3.0","MSXML 2.XMLHTTP","Microsoft.XMLHTTP"]; for(var i = 0; i< activexName.length; i++){ try{ var xmlhttp = new ActiveXObject(activexName[i]); break; }catch(e){ } } } if(xmlhttp == undefined || xmlhttp == null){ alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器"); return; } //2.注册回调方法 xmlhttp.onreadystatechange = callback; //如何从文本框获取值--固定用法 var userName = document.getElementById("UserName").value; /* * GET交互方式 //3.设置和服务器端交互的相应参数 xmlhttp.open("GET","AJAX?name=" + userName,true); //4.设置向服务器端发送的数据，启动和服务器端的交互 xmlhttp.send(null); */ //POST交互方式 //3.设置和服务器端交互的相应参数 xmlhttp.open("POST","AJAX",true); //POST方式交互所需要增加的代码 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //4.设置向服务器端发送的数据，启动和服务器端的交互 xmlhttp.send("name=" + userName); } function callback(){ //5.判断服务器端交互是否完成，判断服务器端是否正确返回了数据 if(xmlhttp.readyState == 4){ //表示和服务器端的交互已经完成 if(xmlhttp.status == 200){ //表示服务器端响应代码是200，正确返回了数据 //纯文本数据的接受方法 var message = xmlhttp.responseText; //向div标签中填充文本内容的方法 var div = document.getElementById("message"); div.innerHTML = message; } } } </script> </head> <body> <input type="text" id="UserName" value="123"/> <input type="button" οnclick="submit()" value="校验用户名" /> <br /> <div id="message"></div> </body> </html>

注意：

1.不同浏览器建立该对象的方式不同：IE7，IE8，FireFox等直接newXMLHttpRequest()；IE6，IE5.5，IE5：通过ActiveXObject控件的名称通过newActiveXObject()方式。

2.open()方法最多可以有五个参数，其中头三个参数是必须的。

使用GET方式时，请求数据位于url链接中，后面的send()方法的参数直接写null；POST方式，open后面需要先调用setRequestHeader(),来设置Content-Type的值，然后调用send()，send的参数就是请求的数据。

3.设置回调函数，不要在函数名后加括号。

**四、两者比较：**

1.get方式可传送简单数据，数据追加到url中发送，也就是，浏览器将各个表单字段元素及其数据按照url参数的格式附加在请求行中的资源路径后面。会被 客户端的浏览器缓存起来，带来严重的安全性问题。

2.post方式，浏览器把各表单字段元素及其数据作为http消息的实体内容发送给Web服务器，而不是url参数传递，用post方式传递的数据量比用get方式要大得多。

3.post请求必须设置Content-Type值为application/x-form-www-urlencoded

4.发送请求时,因为get请求的参数都在url里,所以send函数发送的参数为null,而post请求在使用send方法时,却需赋予其参数对于客户端代码中都请求的server.aspx

5.get请求的url带参数,post请求的url不带参数.post请求是不会被缓存的

**五、何时使用Get请求，何时使用Post请求？**