Ajax请求以及发送Ajax请求的方式

1.在写C语言时候，写了好长时间，终于开始运行了，结果出现了这种情况，以前就没见过。

原来是自己的函数名写错了，main写成了amin.所以写代码一定要细心，不然会给你带来很失望的心情。

2.Ajax请求步骤

//1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化  设置请求方法和url
            xhr.open('GET', 'http://127.0.0.1:8000/server?a=200&&b=300&&c=400');
            //3.发送
            xhr.send();
            //4. 事件绑定 处理服务端返回的结果
            // on  when  当....的时候
            // readystate 是 xhr 对象中的属性，表示状态 0 1 2 3 4
            xhr.onreadystatechange = function () {
                //判断 （服务端返回了所有的结果）
                if (xhr.readyState === 4) {
                    //判断响应状态码 200 404 403 401 500
                    //2xx 成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 处理结果 行 头 空行 体
                        //1.响应行
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符串
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        // console.log(xhr.response);//响应体

                        //设置result的文本
                        result.innerHTML = xhr.response;
                    }
                }
            }

后台代码：

//引入express框架
const express = require('express');
// //路径处理模块
// const path = require('path');
//创建web服务器
const app = express();

//静态资源访问服务功能
// app.use(express.static(path.join(__dirname, 'public')));

//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*')
    //设置响应体
    response.send('Hello Ajax');
});

3.Ajax请求方式

1）get，没有什么注意，代码就如上面那块代码。

2）post，如果使用post发送数据必须设置如下内容，在初始化步骤里面添加：

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

然后在 send() 方法中规定您希望发送的数据；

3）json。

4.发送Ajax请求的方式

1）XMLHttpRequest是WebAPI中的标准对象，可发起Ajax请求。

2）fetch是一个全局作用下的函数，该函数返回一个Promise，是官方提供的一个新的发起Ajax请求的WebAPI。

3）jQuery绝对是一个伟大的发明，它使得dom操作变得简单而直观，并且还解决了一大部分的兼容性问题，在Ajax请求方面，jQuery同样对XMLHttpRequest进行了封装，使得Ajax请求变得简单而直观。

4）axios的使用与jQuery类似。

Ajax请求以及发送Ajax请求的方式

猜你喜欢