Ajax异步请求-GET和POST-蒲公英云

Ajax异步请求-GET和POST

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请求？

Get请求的目的是给予服务器一些参数,以便从服务器获取列表.例如:list.aspx?page=1,表示获取第一页的数据；
Post请求的目的是向服务器发送一些参数,例如form中的内容。所以当我们需要提交表单或传送较大的数据时，使用post请求；传递值需要用参数（大小不大于2KB）时，用get请求。