AJAX基础（一）

Ajax初始

请求

• 初代的请求是将数据放在公共服务器上，通过以下方式让浏览器向服务器发送请求获得后端数据：

地址栏输入地址
特定元素的href属性、src属性
表单提交 form标签中的 action=""属性

缺点：每次向服务器发送请求都会刷新网页

• HTTP请求的方式
  

AJAX

• Ajax全写：Asynchronous Javascript And XML（异步JavaScript和XML）

• Ajax不是新的编程语言，而是一种使用现有标准的新方法

• Ajax原理：

• Ajax特点：异步请求，局部更新

Ajax原生写法

1.创建XMLHttpRequest对象

• XMLHttpRequest对象是AJAX的基石

所有现代浏览器都支持 XMLHttpRequest 对象。
XMLHttpRequest 对象可用于在后台与 Web 服务器交换数据。这意味着可以更新网页的部分内容，而无需重新加载整个页面。

• 所有现代浏览器（Chrome、Firefox、IE、Edge、Safari、Opera）都有内置的 XMLHttpRequest 对象

//创建对象
var xhr = new XMLHttpRequest();

2.向服务器发送请求

open(method,url,async)

• open()方法用于创建一个新的HTTP请求，并指定此请求的类型(如GET、POST等)、URL以及验证信息
• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
  url组成：协议://主机[端口号]/路径?参数

作者博客地址为例：https（协议）: //blog.csdn.net（主机）/m0_64791593（路径）?type=blog（参数）

• async：true（异步）或 false（同步）

如需异步发送请求，open() 方法的 async 参数必须设置为 true

open()没有真发送请求，只是启动一个请求准备发送，还需要调用send()方法，因此要open()要写在send()之前

send([string])

• send()方法用于发送请求到HTTP服务器并接收回应
• 没有参数传入时，用于GET请求
• 有参数传入时，用于POST请求，将客户端输入的数据发送给服务器

3.得到服务器响应，返回数据，执行函数

• onreadystatechange事件
  readyState属性保存了XMLHttpRequest的状态
  
  
  当readyState发生改变时，会触发onreadystatechange事件
  当 readyState 为 4，status 为 200 时，响应就绪，执行后面的操作

xhr.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
        document.getElementById("demo").innerHTML = this.responseText;
        //repomseText:将响应信息作为字符串返回
    }
}