AJAX初步学习

目录

1. 原生AJAX

        1.1 AJAX简介

2. AJAX的使用

2.1 核心对象

2.2 使用步骤

2.3 XMLHttpRequest 对象属性

2.4 XMLHttpRequest 对象方法

3.jQuery中的AJAX

3.1 get请求

3.2 post请求

---

1. 原生AJAX

1.1 AJAX简介

AJAX = Asynchronous JavaScript And XML.

AJAX 并非编程语言。

AJAX 仅仅组合了：

• 浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）

• JavaScript 和 HTML DOM（显示或使用数据）

AJAX最大的优势是：无刷新获取数据，在浏览器中向服务器发送异步请求；

缺点：没有浏览历史，无法回退；存在跨域问题；SEO不友好。

工作流程：

1. 网页中发生一个事件（页面加载、按钮点击）

2. 由 JavaScript 创建 XMLHttpRequest 对象

3. XMLHttpRequest 对象向 web 服务器发送请求

4. 服务器处理该请求

5. 服务器将响应发送回网页

6. 由 JavaScript 读取响应

7. 由 JavaScript 执行正确的动作（比如更新页面）

2. AJAX的使用

2.1 核心对象

        XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。

2.2 使用步骤

//1.创建对象
const xhr = new XMLHttpRequest();
​
//2.初始化
xhr.open('GET', 'http://127.0.0.1:8000/json-server');
​
//3.发送
xhr.send(); //get请求不传参数，只有post请求才传参数
​
//4.绑定事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status <= 300) {
    console.log(xhr.response);
    }
}

2.3 XMLHttpRequest 对象属性

1.onreadystatechange：定义当 readyState 属性发生变化时被调用的函数；

2.readyState：保存 XMLHttpRequest 的状态。

• 0：表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。

• 1：表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息。

• 2：表示 send()方法已经执行，并且头信息和状态码已经收到。

• 3：表示正在接收服务器传来的 body 部分的数据。

• 4：表示服务器数据已经完全接收，或者本次接收已经失败了。

3.responseText：以字符串返回响应数据；

4.responseXML：以 XML 数据返回响应数据；

5.status：返回请求的状态号（一般在200到300内表示请求成功）

• 200: "OK"

• 403: "Forbidden"

• 404: "Not Found"

6.statusText：返回状态文本（比如 "OK" 或 "Not Found"）。

2.4 XMLHttpRequest 对象方法

1.new XMLHttpRequest() ：创建新的 XMLHttpRequest 对象；

2.abort() ：取消当前请求；

3.getAllResponseHeaders() ：返回头部信息；

4.getResponseHeader() ：返回特定的头部信息；

5.open(method, url, async, user, psw) ：

规定请求

        method：请求类型 GET 或 POST

        url：文件位置

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

        user：可选的用户名称

        psw：可选的密码

6.send() ： 将请求发送到服务器，用于 GET 请求；

7.send(string) ：将请求发送到服务器，用于 POST 请求；

8.setRequestHeader() ： 向要发送的报头添加标签/值对。如下所示：

xhr.setRequestHeader('name','zhouwentao');
//要注意，自定义要发送的报头，需要在服务端文件中进行如下修改，从而支持自定义的响应头，同时可将请求类型改成all，可以接受任何类型的请求
response.setHeader('Access-Control-Allow-Headers', '*');

3.jQuery中的AJAX

3.1 get请求

$.get(url, [data], [callback], [type])

url:请求的 URL 地址。

data:请求携带的参数。

callback:载入成功时回调函数。

type:设置返回内容格式，xml, html, script, json, text, _default。

//为按钮绑定一个get请求       
$('button').eq(0).click(function(){
    $.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
        console.log(data);
    },'json');
});
​
//服务端代码
//jQuery 服务
app.all('/jquery-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Headers', '*');
    //response.send('HELLO jQuery AJAX');
    const data = {name: 'zhouwentao'};
    //类型转换
    response.send(JSON.stringify(data));
});

3.2 post请求

$.post(url, [data], [callback], [type])

url:请求的 URL 地址。

data:请求携带的参数。

callback:载入成功时回调函数。

type:设置返回内容格式，xml, html, script, json, text,

$('button').eq(1).click(function(){
    $.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
        console.log(data);
    },'json');
});