Ajax入门

最新推荐文章于 2024-08-28 15:45:11 发布

mingren_1314

最新推荐文章于 2024-08-28 15:45:11 发布

阅读量271

点赞数

文章标签： ajax html javascript

本文链接：https://blog.csdn.net/mingren_1314/article/details/120385216

版权

Ajax

ajax简介

概念及应用

全称：Asynchronous JavaScript And XML

ajax=异步的JavaScript和xml

ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的web应用程序的技术，通过AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据
比如：京东淘宝的二级分类，注册用户时名称的检验，以及在搜索框搜索时的关键字提示等等…

ajax优缺点

优点：

可以无需刷新页面而与服务器端进行通信
允许你根据用户事件来更新部分页面内容

缺点：

没有浏览历史，不能回退
存在跨域问题(同源)
SEO 不友好

xml简介

XML 可扩展标记语言。
XML 被设计用来传输和存储数据。
XML 和HTML 类似，不同的是HTML 中都是预定义标签，而XML 中没有预定义标签，
全都是自定义标签，用来表示一些数据。

比如说我有一个学生数据：
name = “孙悟空” ; age = 18 ; gender = “男” ;
用XML 表示：

<student>
	<name>孙悟空</name>
	<age>18</age>
	<gender>男</gender>
</student>

但是现在已经被JSON取代了

{"name":"孙悟空","age":18,"gender":"男"}

HTTP

HTTP协议(超文本传输协议)，协议详细规定了浏览器和万维网服务器之间相互通信的规则

协议：就是一种约定，一种规则

请求报文

请求行

格式：method url
例如：
	GET /product_detail?id=2
	Post /login

请求头

格式：名字冒号空格值
例如：
	Host: baidu.com
	Cookie: name=baidu
	Content-type: application/x-www-form-urlencoded
	User-Agent: chrome 83

空行

请求体

请求行为GET请求，请求体为空
请求行为POST请求，请求行可以不为空
例：
	username=admin&password=admin

响应报文

响应行

协议版本：
	HTTP/1.1 200 ok

响应头

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

空行

响应体

404 Not Found 服务器无法根据客户端的请求找到资源
403 Forbidden 资源不可用
401 Unauthorized 未授权/请求要求用户的身份认证
500 Internal Server Error 服务器内部错误，无法完成请求
200 OK 请求成功。一般用于GET 与POST 请求

html 文本/json 文本/js/css/图片...
<html>
    ...
</html>

Chrome网络控制台查看通信报文

打开一个网页右键检查

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XU7UYPtS-1632059106967)(C:\Users\Administrator\Pictures\Saved Pictures\前端\Ajax\4.png)]

这个时候什么都没有，刷新一下，然后我们选择一个

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jp7T8tlF-1632059106969)(C:\Users\Administrator\Pictures\Saved Pictures\前端\Ajax\5.png)]

Headers：请求行和请求头、响应行和响应头

Response：响应体

原生ajax基本使用XHR

1.安装node.js

http://nodejs.cn/download/current/

2.安装express(服务端框架)和基本使用

1.打开vscode 打开自己的项目文件夹

2.然后在总文件夹下右键在终端打开

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GKs6lAC0-1632059106970)(C:\Users\Administrator\Pictures\Saved Pictures\前端\Ajax\1.png)]

3.输入命令 :

npm init --yes
npm install express --save

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

5.运行js程序

右键js文件上一级目录的文件夹打开终端

node express基本使用.js

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eYCLq9DD-1632059106972)(C:\Users\Administrator\Pictures\Saved Pictures\前端\Ajax\2.png)]

6.运行成功后，就可以通过端口查看了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-erxAQbDP-1632059106973)(C:\Users\Administrator\Pictures\Saved Pictures\前端\Ajax\3.png)]

3.安装nodemon自动重启工具

https://www.npmjs.com/package/nodemon

安装

npm install -g nodemon

启动服务

ndoemon server.js

ajax案例

1.准备

浏览器端使用的HTML文件和服务器端使用的js文件

html文件：

<!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>
</body>
</html>

js文件：

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

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

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XDwkyONy-1632059106974)(C:\Users\Administrator\Pictures\Saved Pictures\前端\Ajax\6.png)]

启动成功后发现请求都成功

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lS6dU5L7-1632059106974)(C:\Users\Administrator\Pictures\Saved Pictures\前端\Ajax\7.png)]

2.Get请求

html文件

<!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(){
          // 1. 创建对象 
          const xhr = new XMLHttpRequest();
          // 2. 初始化 设置请求方法和url
          xhr.open('GET', 'http://127.0.0.1:8000/server')
          // 3. 发送
          xhr.send();
          // 4. 事件绑定 处理服务端返回的结果
          xhr.onreadystatechange = function(){
            // readyState 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
            //判断 (服务端返回了所有的结果)
            if(xhr.readyState === 4){
              //判断响应状态码 200  404  403 401 500
              if(xhr.status >= 200 && xhr.status < 300){
                // 处理结果 行 头 空行 体
                // 响应
                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>

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 Ajax');
});

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YvTUmDI8-1632059106975)(C:\Users\Administrator\Pictures\Saved Pictures\前端\Ajax\8.png)]

ajax设置请求参数

xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J3mMuWC7-1632059106976)(C:\Users\Administrator\Pictures\Saved Pictures\前端\Ajax\9.png)]

3.Post请求

html文件

<!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 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('a=100&b=200&c=300');
      // 4. 事件绑定
      xhr.onreadystatechange = function(){
        // 判断
        if(xhr.readyState === 4){
          if(xhr.status >=200 && xhr.status < 300){
            // 处理服务端返回的结果
            result.innerHTML = xhr.response;
          }
        }
      }
    });
  </script>
</body>
</html>

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 Ajax');
});

app.post('/server', (request, response) => {
    // 设置响应头, 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send("Hello Ajax POST");
  });
  
//4.监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中...");
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZRH6V2vG-1632059106977)(C:\Users\Administrator\Pictures\Saved Pictures\前端\Ajax\10.png)]

设置请求头信息

// 设置请求体内容的类型
xhr.setRequesHeader('Content-Type','application/x-www-from-urlencoded');
// 自定义头信息
xhr.setRequesHeader('name', 'ykyk');

server.js中设置响应头允许自定义请求头 post改成all app.all

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

4.Json数据请求

html文件

<!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>JSON</title>
  <style>
    #result {
      width: 200px;
      height: 100px;
      border: solid 1px #89b;
    }
  </style>
</head>
<body>
  <div id="result"></div>
  <script>
    const result = document.getElementById('result');
    // 绑定键盘按下事件
    window.onkeydown = function(){
      // 发送请求
      const xhr = new XMLHttpRequest();
      // *2*.(自动转换) 设置响应体数据的类型(自动转换)
      xhr.responseType = 'json';
      // 初始化
      xhr.open('GET', 'http://127.0.0.1:8000/json-server');
      // 发送
      xhr.send();
      // 事件绑定
      xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
          if(xhr.status >= 200 && xhr.status < 300){
            console.log(xhr.response);
            // 1. 手动对数据转化 (字符串再转换成json)
            // let data = JSON.parse(xhr.response); //转换成json
            // result.innerHTML = data.name;
            // *2*. (自动转换)自动转换(自动转换)
            result.innerHTML = xhr.response.name; //已经自动变成json
          }
        }
      }
    }
  </script>
</body>
</html>

js文件

app.all('/json-server', (request, response) => {
  // 设置响应头, 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  // 设置响应头, 设置允许自定义头信息
  response.setHeader('Access-Control-Allow-Headers', '*');
  // 响应一个数据
  const data = {
    name: 'atguigu'
  };
  // 对 对象 进行 字符串 转换
  let str = JSON.stringify(data)
  // 设置响应体 
  response.send(str);
});

ajax使用

IE缓存问题

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IE缓存问题</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #258;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.querySelector('#result');

        btn.addEventListener('click', function(){
            const xhr = new XMLHttpRequest();
            xhr.open("GET",'http://127.0.0.1:8000/ie?time='+Date.now());
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status< 300){
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

js文件

app.get('/ie',(request,response)=>{
//设置响应头
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('HELLO IE');
});

网络请求超时问题

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请求超时与异常处理</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #258;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.querySelector('#result');

        btn.addEventListener('click', function(){
            const xhr = new XMLHttpRequest();
            //超时设置2s设置
            xhr.timeout = 2000;
            xhr.ontimeout = function(){
                alert('网络异常,请稍后重试');
            }
            //网络异常问题
            xhr.onerror = function(){
                alert('你的网络似乎出了一点问题');
            }
            xhr.open("GET",'http://127.0.0.1:8000/delay');
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status< 300){
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

js文件

//延迟响应
app.get('/delay',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    //定时器
    setTimeout(()=>{
        //设置响应体
    response.send('延时响应');
    },3000)
    
});

取消请求问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>取消请求</title>
</head>
<body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button');
        
        let x = null;
        btns[0].onclick = function(){
            x = new XMLHttpRequest();
            x.open('GET','http://127.0.0.1:8000/delay');
            x.send();
        }
        btns[1].onclick = function(){
            //abort 中止
            x.abort();
        }
    </script>
</body>
</html>

请求重复问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>重复请求问题</title>
</head>
<body>
    <button>点击发送</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button');
        let x = null;
        //标识变量
        let isSending = false; // 是否正在发送AJAX请求

        btns[0].onclick = function(){
            //判断标识变量
            if(isSending) x.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求
            x = new XMLHttpRequest();
            //修改 标识变量的值
            isSending = true;
            x.open("GET",'http://127.0.0.1:8000/delay');
            x.send();
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    //修改标识变量
                    isSending = false;
                }
            }
        }

        // abort 中止
        btns[1].onclick = function(){
            x.abort();
        }
    </script>
</body>
</html>

总结

XMLHttpRequest()：创建 XHR 对象的构造函数
status：响应状态码值，如 200、404
statusText：响应状态文本，如 ’ok‘、‘not found’
readyState：标识请求状态的只读属性 0-1-2-3-4
onreadystatechange：绑定 readyState 改变的监听
responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应
response：响应体数据，类型取决于 responseType 的指定
timeout：指定请求超时时间，默认为 0 代表没有限制
ontimeout：绑定超时的监听
onerror：绑定请求网络错误的监听
open()：初始化一个请求，参数为：(method, url[, async])
send(data)：发送请求
abort()：中断请求（发出到返回之间）
getResponseHeader(name)：获取指定名称的响应头值
getAllResponseHeaders()：获取所有响应头组成的字符串
setRequestHeader(name, value)：设置请求头

jQuery

get请求

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

post 请求

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

url: 请求的URL 地址
data: 请求携带的参数
callback: 载入成功时回调函数
type: 设置返回内容格式，xml, html, script, json, text, _defaul

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 发送 AJAX 请求</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">jQuery发送AJAX请求 </h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法ajax</button>
    </div>
    <script>
        //使用jquery发送get请求
        $('button').eq(0).click(function(){
            $.get('http://127.0.0.1:8000/jquery',{a:100,b:200},function(data){
                console.log(data);
            },'json');
        })
       //使用jquery发送post请求
       $('button').eq(1).click(function(){
            $.post('http://127.0.0.1:8000/jquery',{a:100,b:200},function(data){
                console.log(data);
            },'json');
        })
       //通用方法(开发常用)
       $("button").eq(2).click(function(){
           $.ajax({
               //url
               url: 'http://127.0.0.1:8000/jquery',
               //参数
               data: {a:100,b:200},
               //请求类型
               type: 'GET',
               //响应体结果
               dataType: 'JSON',
               //成功的回调
               success: function(data){
                   console.log(data);
               },
               //超时时间
               timeout: 2000,
               //失败的回调
               error: function(){
                   console.log('出错了');
               },
               //头信息
               headers:{
                   c: 300,
                   d: 400
               }
           })
       })
    </script>
</body>
</html>

js文件

//JQuery
app.all('/jquery',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    const data = {name:'张三'};
    response.send(JSON.stringify(data));
    
});

axios

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios 发送 AJAX请求</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>

<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>

    <script>
        const btns =  document.querySelectorAll('button');
        //配置baseURL
        axios.defaults.baseURL = "http://127.0.0.1:8000";
        btns[0].onclick = function(){
            //GET请求
            axios.get('/axios',{
                //url参数
                params:{
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers:{
                    name: 'atguigu',
                    age: 20
                }
            }).then(response =>{
                console.log(response)
            })
        }
        //POST请求
        btns[1].onclick = function(){
            axios.post('/axios',{
                username: 'admin',
                password: 'admin',

                //url
                params:{
                    id: 200,
                    vip: 9
                },
                //请求头参数
                headers: {
                    height: 180,
                    weight: 180,
                }
            }).then(response=>{
                console.log(response.data);
                console.log(response.headers);

            })
        }
        //通用方法(开发使用)
        btns[2].onclick = function(){
            axios({
                //请求方法
                method : 'POST',
                //url
                url: '/axios',
                //url参数
                params: {
                    vip:10,
                    level:30
                },
                //头信息
                headers: {
                    a:100,
                    b:200
                },
                //请求体参数
                data: {
                    username: 'admin',
                    password: 'admin'
                }
            }).then(response=>{
                //响应状态码
                console.log(response.status);
                //响应状态字符串
                console.log(response.statusText);
                //响应头信息
                console.log(response.headers);
                //响应体
                console.log(response.data);
            })
        }
    </script>
</body>

</html>

js文件

//axios
app.all('/axios',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    const data = {name:'张三'};
    response.send(JSON.stringify(data));
    
});

Fetch

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fetch 发送 AJAX请求</title>
</head>
<body>
    <button>AJAX请求</button>
    <script>
        const btn = document.querySelector('button');

        btn.onclick = function(){
            fetch('http://127.0.0.1:8000/fetch?vip=10', {
                //请求方法
                method: 'POST',
                //请求头
                headers: {
                    name:'atguigu'
                },
                //请求体
                body: 'username=admin&password=admin'
            }).then(response => {
                // return response.text();
                return response.json();
            }).then(response=>{
                console.log(response);
            });
        }
    </script>
</body>
</html>

js文件

//fetch
app.all('/fetch',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    const data = {name:'张三'};
    response.send(JSON.stringify(data));
    
});

跨域

同源跨域

同源策略是早由Netscape公司提出，是浏览器的一种安全策略。

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

违背同源策略就是跨域。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<body>
    <h>尚蛙谷</h><br>
    <button>点击获取用户数据</button>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function(){
            axios({
                method: 'GET',
                url: 'http://127.0.0.1:9000/data'
            }).then(response =>{
                console.log(response.data);
            })
        }
    </script>
</body>
</html>

js文件

const express = require('express');

const app = express();

app.get('/home', (request, response)=>{
    //响应一个页面
    response.sendFile(__dirname + '/index.html');
});

app.get('/data', (request, response)=>{
    //防止出现跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    response.send('用户数据');
});

app.listen(9000, ()=>{
    console.log("服务已经启动...");
});

解决跨域

1.JSONP是什么

JSONP是一个非官方的跨域解决方法，纯粹凭借程序员的聪明才智开发出来，只支持get请求。

2.JSONP怎么工作?

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

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

3.JSONP的使用

https://blog.csdn.net/inite/article/details/80333130

原生jsonp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONP实践</title>
</head>
<body>
    用户名<input type="text" id="username"></input>
    <p></p>
    <script>
        //获取input元素
        const input = document.querySelector('input');
        const p = document.querySelector('p');
        //声明handle函数
        function handle(data){
            input.style.border = "solid 1px #f00";
            //修改p标签的提示文本;
            p.innerHTML = data.msg;
        }
        //绑定事件
        input.onblur = function(){
            //获取用户的输入值
            let username = this.value;
            //向服务器端发送请求 检测用户名是否存在
            //1.创建script标签
            const script = document.createElement('script');
            //2.设置标签的src属性
            script.src = "http://127.0.0.1:8000/check";
            //3.将script插入到文档中
            document.body.appendChild(script);
        }
    </script>
</body>
</html>

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

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

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
//jsonp服务
app.all('/jsonp-server',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        name: '尚硅谷atguigu'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
});
//用户名检测是否存在
app.all('/check',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        exist: 1,
        msg: '用户名已经存在'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
});




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

jquery发送jsonp请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery-jsonp</title>
    <style>
        #result{
            width:300px;
            height:100px;
            border:solid 1px #089;
        }
    </style>
    <script crossorigin="anonymous" src='https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js'></script>
</head>
<body>
    <button>点击发送 jsonp 请求</button>
    <div id="result">

    </div>
    <script>
        $('button').eq(0).click(function(){
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp?callback=?', function(data){
                $('#result').html(`
                    名称: ${data.name}<br>
                    校区: ${data.city}
                `)
            });
        });
    </script>
</body>
</html>

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

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

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
//jsonp服务
app.all('/jsonp-server',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        name: '尚硅谷atguigu'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
});
//用户名检测是否存在
app.all('/check',(request, response) => {
});

app.all('/jquery-jsonp',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        name:'尚硅谷',
        city: ['北京','上海','深圳']
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //接收 callback 参数
    let cb = request.query.callback;

    //返回结果
    response.end(`${cb}(${str})`);
});




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

CORS

1.CORS是什么?

CORS,跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源

2.CORS怎么工作?

CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应执行。

3.CORS的使用

https://blog.csdn.net/qq22692150/article/details/99011726

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CORS</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelector('button');
        const result = document.getElementById('result');
        btn.onclick = function(){
           axios({
               method: 'GET',
               url: 'http://localhost:8000/cors-server',
           }).then(response =>{
                result.innerHTML = response.data;
           })
        }
    </script>
</body>
</html>

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

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

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
//jsonp服务
app.all('/jsonp-server',(request, response) => {
});
//用户名检测是否存在
app.all('/check',(request, response) => {
});

app.all('/jquery-jsonp',(request, response) => {
});
app.all('/cors-server', (request, response)=>{
    //设置响应头
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", '*');
    response.setHeader("Access-Control-Allow-Method", '*');
    // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
    response.send('hello CORS');
});


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

后言

此博客只是为简单记录学习，并没有深究，日后会补充

借鉴两篇博客：

https://blog.csdn.net/weixin_44972008/article/details/113772348
https://blog.csdn.net/qq_45632660/article/details/109823169

mingren_1314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Ajax入门

Ajaxajax简介概念及应用全称：Asynchronous JavaScript And XMLajax=异步的JavaScript和xmlajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的web应用程序的技术，通过AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据比如：京东淘宝的二级分类，注册用户时名称的检验，以及在搜索框搜索时的关键字提示等等…ajax优缺点优点：可以无需刷新页面而与服务器端进行通信允许你根据用户事件来更新部分页面内容
复制链接

扫一扫