AJAX 的GET和POST方法(向服务器发送请求)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AJAX 的GET和POST方法(向服务器发送请求)相关的知识,希望对你有一定的参考价值。

如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

方法描述
open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

  • method:请求的类型;GET 或 POST
  • url:文件在服务器上的位置
  • async:true(异步)或 false(同步)
send(string)

将请求发送到服务器。

  • string:仅用于 POST 请求

 

 

 

 

 

 

 

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

 

GET方法示例:

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4 function loadXMLDoc()
 5 {
 6 var xmlhttp;
 7 if (window.XMLHttpRequest)
 8   {// code for IE7+, Firefox, Chrome, Opera, Safari
 9   xmlhttp=new XMLHttpRequest();
10   }
11 else
12   {// code for IE6, IE5
13   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
14   }
15 xmlhttp.onreadystatechange=function()
16   {
17   if (xmlhttp.readyState==4 && xmlhttp.status==200)
18     {
19     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
20     }
21   }
22 xmlhttp.open("GET","/ajax/demo_get.asp",true);
23 xmlhttp.send();
24 }
25 </script>
26 </head>
27 <body>
28 
29 <h2>AJAX</h2>
30 <button type="button" onclick="loadXMLDoc()">请求数据</button>
31 <div id="myDiv"></div>
32 
33 </body>
34 </html>

 

在上面的例子中,可能得到的是缓存的结果。
为了避免这种情况,请向 URL 添加一个唯一的 ID:

1 xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);

2 xmlhttp.send(); 

 

如果希望通过 GET 方法发送信息,请向 URL 添加信息:

1 xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);

2 xmlhttp.send(); 

 

POST方法同上

示例:

1 xmlhttp.open("POST","demo_post.asp",true);

2 xmlhttp.send(); 

 

如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

方法描述
setRequestHeader(header,value)

向请求添加 HTTP 头。

  • header: 规定头的名称
  • value: 规定头的值

 

 

 

 

代码示例:

1 xmlhttp.open("POST","ajax_test.asp",true);

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

3 xmlhttp.send("fname=Bill&lname=Gates"); 

 

异步 - True 或 False?
AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true,否者为false。

当使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可:

1 xmlhttp.open("GET","test1.txt",false);

2 xmlhttp.send();

3 document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 

以上是关于AJAX 的GET和POST方法(向服务器发送请求)的主要内容,如果未能解决你的问题,请参考以下文章

Ajax向服务器发送请求和接收返回的信息

JS——AJAX

Ajax中get请求和post请求

4.27 jQuery AJAX get() 和 post() 方法

ajax中get和post请求的区别

ajax-向服务器发送请求