JS原生Ajax(XMLHttpRequest对象)

小鱼儿 2022-12-04 01:22 97阅读 0赞

## Ajax ##

用途：主要是引用于异步交互，当使用Ajax模型，HTML 页面能够快速地将数据逐步更新显示在用户界面上，不需要重载(刷新)整个页面。这使得HTML页面能成更快速地对用户的操作进行反馈。

### Ajax的实现流程 ###

*  XMLHttpRequest对象是实现Ajax异步交互的核心

1.  创建XMLHttpRequest对象
2.  调用XMLHttpRequest对象的open()与服务器端建立连接
3.  调用XMLHttpRequest对象的send()方法向服务器传输数据，null代表不传输任何东西
4.  利用XMLHttpRequest对象的onreadystatechange事件监听服务器端的通信状态
5.  将接收到的结果更新到HTML页面

### 请求方式 ###

首先注意send的注意方法

send(data)方法
            * 参数data - 表示要向服务器端发送的请求数据
            * 请求方式
              * 如果当前的请求方式为GET的话 - send()方法中只能传递null值
                * 将请求数据添加到请求地址链接中
              *
            * 两种情况
              * 发送数据 - user=maxiaoyu&pwd=123456
                * 请求数据的格式
                  1. 如果具有多个请求数据的话，之间使用"&"进行分隔
                  2. 每个数据格式 -> name=value
              * 不发送数据 - send()方法中必须传递null值，而不能为空

#### GET ####

*  get方法注意的事项
    
     *  get的send只能是null
     *  get的参数要写到open中的url中
 *  get的写法

1. xhr.open("get", "https://extheor.github.io?user=maxiaoyu&pwd=123456");
    2. send(null)

#### POST ####

*  post方法的注意事项
    
     *  post要发送的数据就直接写在send的参数中，以字符串的方式传输，但是服务端接受的是字符串
        
         *  如果想在让服务端接受键值类型的数据，就在传递send之前设置请求头信息`Content- Type`：`appli cati on / x-www- fofm-urlencoded`
 *  post的写法

1. xhr.open("get", "https://extheor.github.io");
    2. xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    3. send('user=maxiaoyu&pwd=123456')

*  写没写请求头传输数据的呈现的格式  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/5fc0d954af764ec18a5547002069b114.png