请稍等...正在玩命加载中......

Ajax请求


一、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

1650012160218

1650012254853

1650012293174

1650012317797

1650012351508

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 端口监听中......");
})

效果如下:

1650016770205

1650016812816

1650016826838

解决 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 请求。

  1. JSONP 怎么工作的?

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

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

  1. 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)+")"); 
});
  1. 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 首部字段,允许服务器声明哪些

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

  1. CORS 怎么工作的?

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

以后就会对响应放行。

  1. 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


文章作者: JinJunzheng
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 JinJunzheng !
评论
评论
  目录