Ajax笔记

最新推荐文章于 2022-04-11 11:15:49 发布

置顶 King.139

最新推荐文章于 2022-04-11 11:15:49 发布

阅读量357

点赞数 1

分类专栏：笔记文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/qq_55910050/article/details/121048354

版权

笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

ajax

---express

ajax是使用js进行在不重新加载页面的情况下，使得页面局部刷新。而传统的页面加载即需要，重新加载整个页面。它的加载是异步进行的，即在加载的同时，页面的其他部分可以正常使用，不会出现卡顿的情况。例如qq动态加载。

缺点：

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

2. 存在跨域问题

3.SEO不友好（爬虫爬不到）

在此之前，我们可以通过以下几种方式让浏览器发出对服务端的请求，获得服务端的数据：

地址栏输入地址，回车，刷新
特定元素的 href 或 src 属性
表单提交

这些方案都是我们无法通过或者很难通过代码的方式进行编程（服务端发出请求。接受服务端返回的响应）

对于Form表单的提交，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，如果不幸由于网络太慢或者其他原因，就会得到一个404页面。（因为传统的http请求的实现得到的是一个页面的响应）。

HTTP协议

一种约定一种请求

请求,(用户向服务器发送)请求报文

1.请求行 GET URL HTTP/1.1

2.请求头 (1)Host

(2):Cookie

(3):Content-type :

(4)：User-Agentle：

响应(服务求返回)响应报文

响应行： HTTP/1.1 200 OK

响应头：Content-Type：

空行

响应体 <body> 内容这些

ajax 封装设置

使用express

// 引入 express
const { response } = require('express');
// 创建应用对象
const express = require('express');
// 创建路由规则
const app= express()
app.get('/server',(request,response)=>{
    // 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    // 设置响应体
    response.send('HELLOW,ajax、')

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

//在界面中使用ajax

 const xhr= new XMLHttpRequest();
            // 初始化 设置请求方法和url  这里的url就是在ajax文档中设置的/然后加上本地默认的http://127.0.0.1:8000
            xhr.open('GET','http://127.0.0.1:8080/server');
            //发送请求
            xhr.send()
            // 事件绑定
                // on when  当什么时候
                // readystate 是xhr对象中的属性 表示状态0 1 2 3 4
                // change 改变
            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);//响应体
                    }else{
                        // 返回失败
                        console.log('not');
                    }
                }
            }

封装的ajax

// 引入 express
// const { response } = require('express');
// 创建应用对象
const express = require('express');
// 创建路由规则
const app= express()
app.get('/server',(request,response)=>{
    // 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置自定义请求头 
    response.setHeader('Access-Control-Allow-Origin','*')
    // 设置响应体
    response.send('HELLOW,ajax、')

})
app.post('/server',(request,response)=>{
    // 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    // 设置响应体
    response.send('HELLOW,ajax、')

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

定时器添加

//延时响应
app.get('/delay',(request,response)=>{
    // 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置自定义请求头 
    response.setHeader('Access-Control-Allow-Origin','*')
    // 设置响应体 +定时器
    setTimeout(() => {
        response.send('延时响应')
    }, 3000);


})

        xhr.timeout =1000;
            //添加定时器 检测是否超时
            xhr.ontimeout =()=>{
                alert('网络异常，请稍后重试~~~~')
            }
        //检查网络连接的回调函数
            xhr.onerror =()=>{
                alert("你的网络似乎没有连接，请检查你的网络连接·····")
            }
          //取消请求
            $('#out').click(()=>{
              xhr.abort()
        })

    $(function () {
        // alert("heelow")
        let isSending =false //是否正在发送AJAX请求
        const xhr = new XMLHttpRequest();
        $('#btuclick').click(() => {
            //判断标识变量 为真的话就取消上一次从新发送，这样可以减少服务器的负载。
            if(isSending){
                xhr.abort()
            }
            isSending =true;






    xhr.onreadystatechange = function () {

                if (xhr.readyState == 4) {
                    //修改 标识变量的值
                    isSending=false

使用jq 来发送请求‘’

跨域！

1：同源策略

协议、域名、端口号、必须完全相同

违背同源策略就是跨域、

2.如何解决跨域

1. 使用JSONP

因为网页中有一些标签是支持跨域的

img、srcipt、link、iframe

jsonp就是利用srcipt支持跨域来运用的

jsonp 传输只允许传输js代码、函数等、不支持直接传字符

所以使用 JSON.stringify 渲染到网页中

JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

语法

JSON.stringify(value[, replacer[, space]])

参数说明：

value:
必需，要转换的 JavaScript 值（通常为对象或数组）。
replacer:
可选。用于转换结果的函数或数组。

如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。
space:
可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

返回值：

返回包含 JSON 文本的字符串。

<body>
    用户名：<input type="text" id="username">
    <p></p>
    <script>   function handle(data) {
            $('#username').css({ 'border': 'solid 1px #f00', })
            $('p').html(data.msg)
        }
        $('#username').blur(() => {
            let username = $("#username").val()
            console.log(username);
            const script =document .createElement('script');
            script.src='http://127.0.0.1:8080/check-username'
             document.body.appendChild(script);   
        })


    </script>
</body>

//JSONP服务 解决跨域问题
app.all('/check-username',(req,res)=>{
    const data={
        exist:1,
        msg:'用户名已经存在'
    };
    let str = JSON.stringify(data);
    res.end(`handle(${str})`)
})

原理大概就是=> 程序员利用script支持跨域=>再请求中传输方法函数=》将script标签添加到网页中这样他就能够获取到跨域后的数据

2.CORS

在header中添加

  response.setHeader('Access-Control-Allow-Origin','*')

*代表所有都允许也可以定义成一个唯一的url地址这样只有那个界面可以使用了

http 访问控制CORS的学习文档

King.139

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax笔记

ajax ajax是使用js进行在不重新加载页面的情况下，使得页面局部刷新。而传统的页面加载即需要，重新加载整个页面。它的加载是异步进行的，即在加载的同时，页面的其他部分可以正常使用，不会出现卡顿的情况。例如qq动态加载。缺点： 1.没有浏览历史，不能回退 2. 存在跨域问题 3.SEO不友好（爬虫爬不到）在此之前，我们可以通过以下几种方式让浏览器发...
复制链接

扫一扫