Ajax发送Post请求

Ajax发送Post请求

前言

今天在使用AJAX向服务器发送POST请求时，我按照网上很多人说的，把请求内容写入JSON，但服务端却不能正确地解析。

错误描述

var xhr = new XMLHttpRequest();
……
xhr.send(JSON.stringify({
“usr” : “zcc”,
“pwd” : “123456”
}));

服务端收到的内容为

array(1) { ["{"usr":"zcc","pwd":"123456"}"]=> string(0) "" }

JSON没有正确解析
最后发现是Content-Type的问题，默认为x-www-form-urlencoded，接收key1=val1&key2=val2…这种格式，若传入json可能不能正常解析。

AJAX发送POST请求

var url = "..."              //要访问的url
var request = new XMLHttpRequest();               //实例化XMLHttpRequest
request.open("POST", url,true);                    //以异步的方式向url发送POST请求
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");            //设置请求头
var msg = "usr=zcc&pwd=123456";             //请求的内容
request.send(msg);                   //发送请求

服务端收到的请求内容

array(2) { ["usr"]=> string(3) "zcc" ["pwd"]=> string(6) "123456" }

同步异步

同步：意为程序会等待当前函数或方法的返回值，引起阻塞的现象，只有收到结果才会继续执行下面的步骤。
异步：不会引起阻塞，当函数或方法得到返回值时，系统会通知程序进行处理。

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true。
通过 AJAX，JavaScript 无需等待服务器的响应，而是：

• 在等待服务器响应时执行其他脚本
• 当响应就绪后对响应进行处理

设置请求头

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头

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

有时不设置请求头，服务端收到的POST请求内容会为空。

POST请求内容

var msg = "usr=zcc&pwd=123456";             //请求的内容

$key和$value之间用’=‘表示键值对，’&'作为分隔符，区分键值对。