ajax学习

qq_58956810

已于 2024-08-14 22:24:38 修改

阅读量972

点赞数 12

文章标签： ajax 学习前端

于 2024-08-14 22:19:08 首次发布

本文链接：https://blog.csdn.net/qq_58956810/article/details/141107218

版权

主要讲解内容

ajax的介绍，XML的介绍，以及HTTP协议。ajax发送请求，发送的就是http请求，把协议搞懂之后，可以在协议的这个层面，去观察数据的一个交换的过程

四种发送ajax的一个使用方式：原生，jQuery，fetch，axios，还有ajax一个跨域的问题

常见的一些例子

注册页面当中输入的用户名会发送ajax请求给服务器，去校验用户名是否存在，然后返回对应的结果，如果不可用，给一个提醒

京东里面的二级菜单栏等，按需加载，用户看到时候才发送请求（会有一个loading效果），用户不看的时候就不发送请求，利用率就会很高，整体页面的加载速度也会很快，所以ajax可以提高网页的加载速度

作用：ajax可以在页面不刷新的时候向服务器发送请求，实现数据的交换，这样的话数据交换会更快速，用户体验会更好

XML 简介

XML 被设计用来传输和存储数据。

XML 和 HTML 类似，不同的是 HTML 中都是预定义标签（提前被定义好的标签，比如span，body，ul，ol等），而 XML 中没有预定义标签，全都是自定义标签（也即是自己命名取出来的标签），用来表示一些数据。

之前ajax在进行数据交换时，所使用的格式就是XML，服务器端给客户端浏览器返回结果时，就是用的XML格式的一个字符串，前端js在接收到这个结果的时候对这个内容进行一个解析，把这个内容提取出来，然后对数据进行一个处理

用 XML 表示：
<student>
<name>孙悟空</name>
<age>18</age>
<gender>男</gender>
</student>

现在已经被 JSON 取代了。可以借助json当中的一些api方法，快速将字符串转成js对象，灵活度要远胜于xml

AJAX 的缺点

1) 没有浏览历史，不能回退

2) 存在跨域问题 ( 同源 )

3) SEO 不友好

检测node.js是否已经安装完毕，打开命令窗口进行检测即可，输入命令：node -v

express是基于node.js平台的，

实战

请求头信息的介绍

ajax原生发送post请求，配置自定义请求头的时候，在配置服务器当中缺少配置而报错

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST 请求</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #903;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById('result')
        result.addEventListener('mouseover', function () {
            const xhr = new XMLHttpRequest()
            xhr.open('POST', 'http://127.0.0.1:8000/server')
            // 设置请求头
            // Content-Type 是预定义的请求头，而name是自定义的请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            xhr.setRequestHeader('name', 'atguigu')
            // 请求体可以设置任意格式的数据
            xhr.send('a=100&b=200&c=300')
            // xhr.send('a:100&b:200&c:300')
            // xhr.send('124857999065')
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response
                    }
                }
            }
        })
    </script>
</body>

</html>

错误图片展示：

解决方法：设置响应头，response.setHeader('Access-Control-Allow-Headers', '*')

// .all可以接受任何类型的请求，之前如果写post请求的话，还是会报错
app.all('/server', (request, response) => {
    // 设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 响应头， *表示所有头的信息都可以接受
    response.setHeader('Access-Control-Allow-Headers', '*')
    // 设置响应体
    response.send('HELLO AJAX POST')
})

两个的网址不一样，协议，域名，端口都不一样的话，就是跨域请求（向另外一个页面请求数据，如果协议，域名，端口都不一样的话，那就是跨域的请求，自己文件当中打开的页面的话，有些地址也是文件协议的，这个了解一下）

根据jsonp来发送跨域请求的话，如果没有结果出现，那就先启动服务器，或者ctrl+F强制刷新一下

bootCDN 一个网站，可以快速复制juery等网址到html文件当中

AJAX 的使用

XMLHttpRequest ， AJAX 的所有操作都是通过该对象进行的。

使用步骤

1) 创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

2) 设置请求信息，method要加上''，而且是大写

xhr.open(method, url);

// 可以设置请求头，一般不设置

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

3) 发送请求

xhr.send(body) //get 请求不传 body 参数（参数是任意类型），只有 post 请求使用

4) 接收响应

//xhr.responseXML 接收 xml 格式的响应数据
//xhr.responseText 接收文本格式的响应数据
xhr.onreadystatechange = function (){
if(xhr.readyState == 4 && xhr.status == 200){
var text = xhr.responseText;
console.log(text);
}
}

解决 IE 缓存问题

问题：在一些浏览器中 (IE), 由于缓存机制的存在， ajax 只会发送的第一次请求，剩

余多次请求不会在发送给浏览器而是直接加载缓存中的数据。

解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址

即可避免缓存问题

xhr.open("get","/testAJAX?t="+Date.now());

AJAX 请求状态

xhr.readyState 可以用来查看请求当前的状态

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState

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

1: 表示 send() 方法还没有被调用，仍然可以使用 setRequestHeader() ，设定 HTTP

请求的头信息。

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

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

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

jQuery 中的 AJAX

get 请求，post请求写法一样，只是将get换成了post

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

url: 请求的 URL 地址。

data: 请求携带的参数。

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

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

如何解决跨域

1) JSONP 是什么

JSONP(JSON with Padding) ，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明

才智开发出来，只支持 get 请求。

2) JSONP 怎么工作的？

在网页有一些标签天生具有跨域能力，比如： img link iframe script 。

JSONP 就是利用 script 标签的跨域能力来发送请求的。

3) JSONP 的使用

1. 动态的创建一个 script 标签

var script = document.createElement("script");

2. 设置 script 的 src ，设置回调函数

script.src = "http://localhost:3000/testAJAX?callback=abc";

function abc(data) {

alert(data.name);

};

3. 将 script 添加到 body 中

document.body.appendChild(script);

4. 服务器中路由的处理

router.get("/testAJAX" , function (req , res) {
console.log("收到请求");
var callback = req.query.callback;
var obj = {
name:"孙悟空",
age:18
}
res.send(callback+"("+JSON.stringify(obj)+")");
});

CORS

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

1) CORS 是什么？

CORS （ Cross-Origin Resource Sharing ），跨域资源共享。 CORS 是官方的跨域解决方

案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持

get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些

源站通过浏览器有权限访问哪些资源

2) CORS 怎么工作的？

CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应

以后就会对响应放行。

3) CORS 的使用

主要是服务器端的设置：

router.get("/testAJAX" , function (req , res) {
//通过 res 来设置响应头，来允许跨域请求
//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
res.set("Access-Control-Allow-Origin","*");
res.send("testAJAX 返回的响应");
});

以上仅仅为笔记，后续会持续改进的！！

qq_58956810

关注

12
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
ajax学习

之前ajax在进行数据交换时，所使用的格式就是XML，服务器端给客户端浏览器返回结果时，就是用的XML格式的一个字符串，前端js在接收到这个结果的时候对这个内容进行一个解析，把这个内容提取出来，然后对数据进行一个处理。两个的网址不一样，协议，域名，端口都不一样的话，就是跨域请求（向另外一个页面请求数据，如果协议，域名，端口都不一样的话，那就是跨域的请求，自己文件当中打开的页面的话，有些地址也是文件协议的，这个了解一下）中都是预定义标签（提前被定义好的标签，比如span，body，ul，ol等），而。
复制链接

扫一扫