原生(JavaScript)的Ajax

最新推荐文章于 2024-08-27 12:25:19 发布

原创最新推荐文章于 2024-08-27 12:25:19 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

Ajax 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了使用Ajax进行异步请求的五个关键步骤，包括创建XMLHttpRequest对象、设置回调函数、建立服务器连接、发送请求及处理响应状态。通过具体代码示例，帮助读者理解GET与POST请求的区别及实现。

Ajax请求的五个步骤

① 创建XMLHttpRequest异步对象

var xmlHttp = new XmlHttpRequest();

② 设置回调函数

#onreadystatechange :存储函数。每当readyState属性改变时就会调用函数
xmlHttp.onreadystatechange = fn();

③ 使用open方法与服务器建立连接

#open方法
open(method,url,async);
method:请求的类型 GET或POST
url:文件在服务器上的路径
async:true(异步)或false（同步）
#get请求
xmlHttp.open("get","/WEB11/js_ajax","true");
#post请求,需要设置请求头
xmlHttp.open("get","/WEB11/js_ajax","true");
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

④ 使用send方法提交请求

#get 不需要传递参数
xmlHttp.send(null);

#post 需要传递参数
xmlHttp.send("name=mufeng&age=18");

⑤ 在回调函数中针对不同的响应状态进行处理

#readyState:存有XMLHttpRequest的状态。从 0 到 4 发生变化;
0:请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已经就绪
#status
200:"OK"
404: "未找到页面"



function fn(){
 // 判断异步对象的状态 ，判断交互是否成功
  if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      // 获取服务器响应的数据
      var res = xhr.responseText
      // 解析数据
      res = JSON.parse(res)
  }
}