打开ajax大门的新世界（我真的很喜欢这篇内容！）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 一.ajax是什么？
• 二.使用实例
• 三.ajax封装

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

一. 简介 ajax是什么

ajax 异步的js和xml，通过ajax可以向浏览器发送异步请求，无刷新获取数据

xml是什么？

xml可扩展标记语言，被设计用来传输和存储数据

xml和html类似，不同的是html中都是预定义标签，而xml中没有预定义标签，

全都是自定义标签，用来表示一些数据

<student>

​ <name>小飞</name>

​ <age>20</age>

​ <gender>男</gender>

</student>

现在已经被json取代了

用json表示：

{"name":"小飞"，“age”:20,"gender":"男"}

ajax的特点：

1. 可以无需刷新页面与服务器进行通讯
2. 允许你根据用户事件来更新部分页面内容

缺点：

1. 没有浏览历史
2. 存在跨域问题
3. seo不友好

http协议：超文本传输协议，协议详细规定了浏览器和万维网服务器之间互相通信的规则

二、ajax的五个步骤        

1.创建一个异步对象

2 设置请求方式和请求地址

3 发送请求

4 监听状态变化

5 处理返回的结果

2.读入数据

代码如下（示例）：

var btn = document.querySelector("button");

btn.addEventListener("click",function(){

//1 创建一个异步对象

var xmlhttp = new XMLHttpRequest()

//2 设置请求方式和请求地址

/*method：请求的类型；GET 或 POST

url：文件在服务器上的位置

async：true（异步）或 false（同步）*/

xmlhttp.open("GET","ajax-get.php",true);

//3 发送请求 xmlhttp.send();

//4 监听状态变化

//只要异步对象发生了变化就会调用这个回调函数 使用onreadystatechange xmlhttp.addEventListener("readystatechange",function (){

/*readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成且响应已就绪*/

if(xmlhttp.readyState ===4){

//判断 当http状态码在200到300之间 或者当http状态码等于304时 请求成功 if(xmlhttp.status>=200&&xmlhttp.status<300||xmlhttp.status===304){

//5 处理返回的结果

console.log("接受到服务器发送的数据"); }

else{ console.log("没有接受到服务器数据")

}

}

})

})

三.ajax封装

 

 

---