From fab9e851f5f197fcdd080b915d4e0be6c16cb5ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=BE=BE=E5=85=B4=E5=BB=BA?= <3090553985@qq.com>
Date: Wed, 30 Nov 2022 13:33:38 +0800
Subject: [PATCH] dd

---
 .../\347\254\224\350\256\260/11.29 AJAX.md"   | 152 ++++++++++++++++++
 1 file changed, 152 insertions(+)
 create mode 100644 "37\350\276\276\345\205\264\345\273\272/\347\254\224\350\256\260/11.29 AJAX.md"

diff --git "a/37\350\276\276\345\205\264\345\273\272/\347\254\224\350\256\260/11.29 AJAX.md" "b/37\350\276\276\345\205\264\345\273\272/\347\254\224\350\256\260/11.29 AJAX.md"
new file mode 100644
index 0000000..3d241b4
--- /dev/null
+++ "b/37\350\276\276\345\205\264\345\273\272/\347\254\224\350\256\260/11.29 AJAX.md"	
@@ -0,0 +1,152 @@
+## AJAX
+
+AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和 XML），是一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。
+
+## AJAX的工作原理
+
+Ajax的工作原理相当于在用户和服务器之间加了一个中间层(AJAX引擎)，使用户操作与服务器响应异步化。客户端发送请求，请求交给xhr，xhr把请求提交给服务器，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上，如下图所示： ![AJAX工作原理图](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7adb89a0df3f451da73c9946b0b22e55~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp)
+
+## AJAX请求的五个步骤
+
+1.建立XMLHttpRequest对象;
+2.设置回调函数;
+3.配置请求信息，(如open,get方法)，使用open方法与服务器建立链接;
+4.向服务器发送数据;
+5.在回调函数中针对不同的响应状态进行处理;
+复制代码
+
+### 1.创建XMLHttpRequest异步对象
+
+```javascript
+var xhr;  //定义一个变量,用于存放XMLHttpRequest对象
+if(window.XMLHttpRequest) { 
+  // code for IE7+, Firefox, Chrome, Opera, Safari
+  xhr = new XMLHttpRequest();
+} else {
+  // code for IE6, IE5
+  xhr = new ActiveXObject("Microsoft.XMLHTTP");
+}
+复制代码
+```
+
+### 2.设置回调函数
+
+```javascript
+xhr.onreadystatechange = callback；
+复制代码
+```
+
+### 3.使用open方法与服务器建立连接
+
+```javascript
+// get 方式
+xhr.open("get", "test.php", true)
+
+// post 方式发送数据 需要设置请求头
+xhr.open("post", "test.php", true)
+xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
+复制代码
+```
+
+### 4.向服务器发送数据
+
+```javascript
+// get 不需要传递参数
+xhr.send(null)
+
+// post 需要传递参数
+xhr.send("name=jay&age=18")
+复制代码
+```
+
+### 5.在回调函数中对不同的响应状态进行处理
+
+```javascript
+function callback() {
+  // 判断异步对象的状态
+  if(xhr.readyState == 4) {
+    // 判断交互是否成功
+    if(xhr.status == 200) {
+      // 获取服务器响应的数据
+      var res = xhr.responseText
+      // 解析数据
+      res = JSON.parse(res)
+    }
+  }
+}
+复制代码
+```
+
+- ajax中的五种状态码
+  - 0：请求未初始化
+  - 1：服务器连接已建立(已调用open方法，但还未调用send)
+  - 2：请求已接收(已调用send方法)
+  - 3：请求处理中(请求已到达服务端，正在处理)
+  - 4：请求已完成，且响应已就绪
+  - 状态： 200——正确、404——未找到页面、500——错误
+
+## AJAX请求成功和失败判断
+
+`ajax` 的 `success` 和 `error` 方法根据响应状态码来触发。
+ 当 `XMLHttpRequest.status` 为 **200** 的时候，表示响应成功，此时触发 `success()`. 其他状态码则触发 `error()`。
+
+- error判断，请求失败
+
+  ```ini
+  error: function (data) {
+      var json =  JSON.stringify(data);
+          alert(json);
+  }
+  复制代码
+  ```
+
+  - 打印结果：
+
+  ```scss
+  【readyState】：
+  0 － （未初始化）还没有调用send()方法
+  1 － （载入）已调用send()方法，正在发送请求
+  2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
+  3 － （交互）正在解析响应内容
+  4 － （完成）响应内容解析完成，可以在客户端调用了
+  复制代码
+  ```
+
+## 完整的AJAX实例
+
+```javascript
+// -----1.创建XMLHttpRequest对象，也就是创建一个异步调用对象
+var xhr = new XMLHttpRequest();
+// -----3. 创建一个新的HTTP请求，并指定该请求的方法、URL及验证信息
+xhr.open('post','www.xxx.com',true)
+// 接收返回值
+// -----2、设置响应HTTP请求状态变化的函数------5.回调函数对不同状态进行处理
+xhr.onreadystatechange = function(){    //xhr.onreadystatechange = callback;时间回调
+  if(xhr.readyState === 4) {
+    if(xhr.status >= 200 && xhr.status < 300 || CharacterData.status == 304) {
+      console.log(xhr.responseText);
+    }
+  } 
+}
+// -----处理请求参数
+postData = {"name1": "value1", "name2": "value2"};
+postData = (function(value){
+  var dataString = "";
+  for(var key in value){
+       dataString += key+"="+value[key]+"&";
+  };
+    return dataString;
+}(postData));
+
+// 设置请求头
+xhr.setRequestHeader("Content-type", "applicationx-www-form-urlencoded");
+// 异常处理
+xhr.onerror = function() {
+  console.log('Network request failed')
+}
+// 跨域携带cookie
+xhr.withCredentials = true;
+// ----4.发出请求
+xhr.send(postData);
+```
+
-- 
Gitee