前端：与后端的数据交流（AJAX）

原文：https://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp

目录

XMLHttpRequest （XHR）对象

发出请求

创建对象：new XMLHttpRequest()

发送请求： open() +send() 

如何选择发送方法：

创建请求：GET、POST

GET请求：GET+url+(?+唯一id)+true

POST请求：

​

获取响应：responseText 或 responseXML 属性

responseText：响应为非XML时使用

responseXML：响应为XML时使用

​请求被发送到服务器时，我们需要执行一些基于响应的任务,用于查看响应状态

AJAX的高级使用

与ASP/PHP程序文件交流（具体看url中文件的后缀名） 

与数据库交流

---

1、AJAX用于前端与后端之间的数据交互，也就是与服务器接口对接的数据交流

2、写在javascript中，以函数的形式存在

例如：

XMLHttpRequest （XHR）对象

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

发出请求

创建对象：new XMLHttpRequest()

variable=new XMLHttpRequest();

发送请求： open() +send() 

参数解析：

method:请求方式

url ：参数是服务器上文件的地址，可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

True 或 False：AJAX是异步处理，所以使用它的话就必须选true。当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数

如何选择发送方法：

1、普通使用get请求

2、以下情况使用post请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

创建请求：GET、POST

GET请求：GET+url+(?+唯一id)+true

括号内的内容是避免获得缓存结果

POST请求：

1、setRequestHeader() 来添加 HTTP 头

2、在 send() 方法中规定您希望发送的数据

获取响应：responseText 或 responseXML 属性

responseText：响应为非XML时使用

获取响应文件直接写入样式未myDiv的地方：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML：响应为XML时使用

1、获取响应文件

2、新建txt准备接收数据

3、document.getElementsByTagName(Tagname)函数获取标签"ARTIST"并存放在X处

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序

（1）Tagname是标签的名称，如p、a、img等标签名

（2）和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

4、使用for循环逐个获取x中的元素值并放在txt

4、在html中id=myDiv的地方，使用innerHTML将txt打印出来

请求被发送到服务器时，我们需要执行一些基于响应的任务,用于查看响应状态

1、当 readyState 改变时，就会触发 onreadystatechange 事件

2、readyState 属性存有 XMLHttpRequest 的状态信息：

3、XMLHttpRequest 对象的三个重要的属性：

网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）

AJAX的高级使用

1、创建 XMLHttpRequest 对象

2、服务器响应就绪时执行的函数

3、如果服务器响应就绪

4、相应效果配置

5、更新相应效果

6、以上布置好后发送请求

与ASP/PHP程序文件交流（具体看url中文件的后缀名） 

与数据库交流

与XML数据交流

实例

1、文本文件载入到网页：

显示文本

2、网页加载XML文件：

选择性显示数据：

3、head请求：

获取head数据

4、指定的head请求：

5、当用户再文本框中键入内容时，使用XMLHttp进行在线通信：