Ajax请求-51学代码

一、Ajax简介

Ajax全称为Asynchronous JavaScript And XML，就是异步的 Js 和 XML。

通过Ajax 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。

Ajax 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

AJAX 的优点

1) 可以无需刷新页面而与服务器端进行通信。

2) 允许你根据用户事件来更新部分页面内容。

AJAX 的缺点

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

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

3) SEO 不友好

二、XML简介

它是可扩展标记语言，被设计用来传输和存储数据。

XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。

三、HTTP

HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

四、请求报文

重点是格式与参数

行      POST  /s?ie=utf-8  HTTP/1.1 

头      Host: 51xcode.com
        Cookie: name=51xcode
        Content-type: application/x-www-form-urlencoded
        User-Agent: chrome 83

空行

体      username=admin&password=admin

五、响应报文

行      HTTP/1.1  200  OK

头      Content-Type: text/html;charset=utf-8
        Content-length: 2048
        Content-encoding: gzip

空行    

体      <html>
            <head>
            </head>
            <body>
                <h1>51学代码</h1>
            </body>
        </html>

六、express基本使用

express是基于node.js平台的并具有快速、开放、极简的Web开发框架。

首先安装node.js，安装完后才可以使用express框架搭建后台服务

初始化npm init--yes

安装express框架

npm i express

新建express.js文件写入以下代码：

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

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

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request, response)=>{
    //设置响应
    response.send('HELLO EXPRESS');
});

//4. 监听端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动, 8000 端口监听中....");
});

保存后在终端打开并输入node express.js，此时服务端口已经启动。

七、Ajax发送请求

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: 表示服务器数据已经完全接收，或者本次接收已经失败了

1.GET请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax GET请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border:solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>

    <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        //绑定事件
        btn.onclick = function(){
            // console.log('test');
            //创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化 设置请求方法和 url
            xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');
            //3.发送
            xhr.send();
            //4.事件绑定 处理服务端返回的结果
            // on when  当......的时候
            // readystate 是 xhr 对象中的属性，表示状态 0 1 2 3 4
            // change 改变  
            xhr.onreadystatechange = function(){
                //判断 （服务端返回了所有的结果）
                if(xhr.readyState === 4){
                    //判断响应状态码 200 404 403 401 500
                    // 2开头 都是表示成功
                    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;

                    }else{

                    }
                } 

            }
        }
    </script>
</body>
</html>

新建server.js文件并写入以下代码并启动服务node express.js

//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.send('hello world get请求');
});

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

启动服务node express.js

2.POST请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>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(){
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化 设置类型与 URL
             xhr.open('POST','http://127.0.0.1:8000/server');
             //3.发送
             xhr.send();
             //4.事件绑定
             xhr.onreadystatechange = function(){
                 //判断
                 if(xhr.readyState === 4){
                     if(xhr.status >= 200 && xhr.status < 300){
                         //处理服务端返回的结果
                         result.innerHTML = xhr.response;
                     }
                 }
             }
        })
    </script>

</body>
</html>

server.js文件中get改为post

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

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

//3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.post('/server',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');

    //设置响应
    response.send('hello world post请求');
});

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

效果如下：

解决 IE 缓存问题

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

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

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

即可避免缓存问题

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

八、jQuery 中的 AjaX

get 请求

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

url:请求的 URL 地址。

data:请求携带的参数。

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

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

post 请求

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

url:请求的 URL 地址。

data:请求携带的参数。

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

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

九、跨域

9.1 同源策略

同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。

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

违背同源策略就是跨域。

9.2 如何解决跨域

9.2.1 JSONP

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)+")"); 
});

4) jQuery 中的 JSONP

<!DOCTYPE html>
<html lang="en"> 
<head> <meta charset="UTF-8"> 
<title>Title</title> </head>
 <body>
    <button id="btn">按钮</button> 
    <ul id="list"></ul> 
     <script type="text/javascript" src="./jquery-1.12.3.js"></script> 
     <script type="text/javascript">   
         window.onload = function () { 
         var btn = document.getElementById('btn');
         btn.onclick = function () {
         $.getJSON("http://api.douban.com/v2/movie/in_theaters?callback=?",function(data{ 
                 console.log(data);
                  //获取所有的电影的条目
                  var subjects = data.subjects;
                   //遍历电影条目
                   for(var i=0 ; i<subjects.length ; i++){
                    $("#list").append("<li>"+ 
                      subjects[i].title+"<br />"+
                      "<img src=\""+subjects[i].images.large+"\" >"+ 
                       "</li>");
         }
         }); 
     }
    }
    </script>
</body>
</html>

9.2.2 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 返回的响应");

});

笔记参考尚硅谷前端讲师：李强

课程教程参考：https://www.bilibili.com/video/BV1WC4y1b78y?p=1

免责声明：

1.本站所提供的全部内容仅限于交流、学习与研究使用，请勿用于非法目的。

2.任何使用本站内容而出现的意外或损失，本站概不负责。

3.本站遵守国家法律法规，禁止制作、复制、发布、传播任何具有反动、色情、暴力、淫秽，政治等内容的信息，一经发现，立即删除，并锁定IP地址移交给公安机关处理。

4.本站的留言、评论与转载内容，仅代表原作者个人观点，与本站观点或立场无关，所有评论、留言均需经过审核后方可正常显示，本站有权删除和过滤违反法律法规的或不正当的言论。

5.本站的文章部分内容可能来源于网络或转载于其他文章，仅供大家学习与参考，如有侵权，请联系站长QQ:1823782755进行删除处理。

6.本站可能会包含第三方网站的链接，点击后或将离开本站并进入其他站点，本站不对其他站点的内容负责。

7.本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。

8.根据《计算机软件保护条例》第十七条，为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬，本站所有软件资料仅用于学习研究。

9.本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。

10.本站文章采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可，阅读后请勿用于非法用途。

点我去本站旗下导航网

更多知识，请关注微信公众号“51学代码”

文章版权声明 1.本网站名称：51学代码
2.本站永久网址：https://www.51xcode.com
3.本站的部分内容可能来源于网络或转载引用于其他文章，仅供大家学习与参考，如有侵权，请联系站长QQ:1823782755进行删除处理。
4.本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5.本站一律禁止以任何方式发布或转载任何违法的相关信息，一经发现，立即删除，并锁定IP地址移交给公安机关处理，访客发现请向站长举报。
6.如需转载文章请标明来源:51学代码 www.51xcode.com

THE END