AJAX笔记

前言

---

一、什么是Ajax？

Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。
AJAX分为同步（async = false）和异步（async = true）

同步请求

当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。

异步请求

当用户发送请求时，当前页面还可以继续使用，当异步请求的数据响应给页面，页面把数据显示出来 。

AJAX 的优势

1. 不需要插件的⽀持，原⽣ js 就可以使⽤
2. ⽤户体验好（不需要刷新⻚⾯就可以更新数据）
3. 减轻服务端和带宽的负担

二、使用步骤

1.创建ajax对象

代码如下（示例）：

const xhr = new XMLHttpRequest()

2.配置链接信息

代码如下（示例）：

 // 初始化 设置请求方法和 url
 // xhr.open('请求⽅式：POST，GET...', '请求地址', 是否异步)
    xhr.open('GET', 'http://127.0.0.1:9000/server?a=100&b=200');
 //设置请求头
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

3.发送请求

xhr.send();

4.事件绑定

处理服务端返回的结果

readystate

xhr 对象中的属性, 表示状态 0 1 2 3 4
readyState === 0 : 表示未初始化完成，也就是 open 方法还没有执行
readyState === 1 : 表示配置信息已经完成，也就是执行完 open 之后
readyState === 2 : 表示 send 方法已经执行完成
readyState === 3 : 表示正在解析响应内容
readyState === 4 : 表示响应内容已经解析完毕，可以在客户端使用了

http 状态码为 200 ~ 299

readyStateChange

在 ajax 对象中有一个事件，叫做 readyStateChange 事件
这个事件是专⻔用来监听 ajax 对象的 readyState 值改变的的行为

 xhr.onreadystatechange = function(){
                //判断 (服务端返回了所有的结果)
                if(xhr.readyState === 4){
                    //判断响应状态码 200  404  403 401 500
                    // 2xx 成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理结果  行 头 空行 体
                        //响应 
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符串
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        // console.log(xhr.response);//响应体
                        //设置 result 的文本
                        result.innerHTML = xhr.response;
                    }else{

                    }
                }
            }

GET 和POST

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

express

//1.引入express
const express=require('express');

//2.创建应用对象
const app=express();

//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server',(request,response)=>{
     //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');//*可以替换为网页地址：允许哪些网页
    response.setHeader('Access-Control-Allow-Headers','*');
    response.setHeader('Access-Control-Allow-Method','*');

    
     //设置响应体
     response.send('Hello AJAX');



    //响应一个数据
    const data={
        exist:1,
        msg:'用户名已存在'
    }
    //转化为字符串
    let str=JSON.stringify(data);
    //设置响应体
    response.end(`handle(${str})`);
})

app.listen(9000,()=>{
    console.log('服务已经启动，9000 端口监听中...');
})