10分钟学会——前端如何通过AJAX向后端发送请求

AJAX

基于现有的internet标准：

• XMLHttpRequest 对象 (异步的与服务器交换数据)
• JavaScript/DOM (信息显示/交互)
• CSS (给数据定义样式)
• XML (作为转换数据的格式)

GET请求、异步请求、来自服务器的响应并非XML

使用方法（举例说明）：

使用 AJAX 修改该文本内容
修改内容

创建XMLHttpRequest对象。

给XMLHttpRequest对象添加onreadystatechange事件处理函数（响应处于就绪状态时执行的函数）。

通过XMLHttpRequest对象的responseText属性获取数据库返回值。

通过XMLHttpRequest对象的open(method,url,async)方法打开链接，send(string)方法发送请求。

其中method是请求的类型，可以使GET或POST，url文件在服务器上的位置，async可是是true（异步）或false（同步）。

string仅用于POST请求，GET请求时不需要有参数。

 

GET请求、异步请求、来自服务器的响应为XML

使用方法（举例说明）：

获取我的 CD
 

创建XMLHttpRequest对象。

给XMLHttpRequest对象添加onreadystatechange事件处理函数（响应处于就绪状态时执行的函数）。

通过XMLHttpRequest对象的responseXML属性获取数据库返回值并解析。

通过XMLHttpRequest对象的open(method,url,async)方法打开链接，send(string)方法发送请求。

其中method是请求的类型，可以使GET或POST，url文件在服务器上的位置，async可是是true（异步）或false（同步）。

string仅用于POST请求，GET请求时不需要有参数。

 

GET请求、异步请求、带有回调函数

使用方法（举例说明）：

使用 AJAX 修改文本内容
修改内容

 

一个POST请求的例子（异步请求,请求数据不是普通的string，是像表单那样有格式的）：

请求数据

 

//如果需要像 HTML 表单那样 POST 数据，使用 setRequestHeader() 来添加 HTTP 头。
//然后在 send() 方法中规定要发送的数据
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("user=admin&pass=1234");

这是需要注意的两行代码。