前端学习条记-Ajax篇

海哥  金牌会员 | 7 天前 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 664|帖子 664|积分 1992



第1章:原生AJAX

1.1Ajax简介

AAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。
通过 AAX 可以在欣赏器中向服务器发送异步请求，最大的优势:无刷新获取数据。
AAX 不是新的编程语言，而是一种将现有的尺度组合在一起使用的新方式。
1.2 XML 简介

XML 可扩展标记语言。
XML 被计划用来传输和存储数据。
XML 和 HTML 类似，不同的是 HTML中都是预界说标签，而XML中没有预界说标签全都是自界说标签，用来表现一些数据。
比如说有一个学生数据:
name="孙悟空";age=18;gender="男";
用 XML 表现:
  1. <student>
  2.     <name>孙悟空</name>
  3.     <age>18</age>
  4.     <gender>男</gender>
  5. </student>
复制代码
如今以及被json代替了，使用json表现{"name":"孙悟空","age":18,"gender":"男"}

1.3AJAX的特点


1.3.1 AJAX 的长处


  • 可以无需刷新页面而与服务器端举行通信。
  • 允许你根据用户事件【鼠标事件、键盘事件、表单事件等】来更新部分页面内容。
1.3.2 AJAX 的缺点


  • 没有欣赏历史，不能回退
  • 存在跨域问题(同源)
  • SEO 不友爱


  1. //1.引入express
  2. const express = require('express');
  4. //2.创建应用对象
  5. const app = express();
  7. //3.创建路由规则
  8. // request 是对请求报文的封装
  9. //response 是对响应报文的封装
  10. app.get('/',(request,response)=>{
  11.     //设置响应
  12.     response.send('hello!express');
  13. });
  15. //4.监听端口启动服务
  16. app.listen(8000,()=>{
  17.     console.log("服务已经启动，8000 端口监听中......");
  18. });
复制代码

1.4 AJAX 的使用

1.4.1 核心对象

   XMLHttpRequest  ，  AJAX   的全部操作都是通过该对象举行的。   1.4.2 使用步骤

   1) 创建 XMLHttpRequest   对象     var xhr = new XMLHttpRequest();     2) 设置请求信息     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);     }     }      关于JSON请求的干系设置

   
  1. //server.js文件修改
  2. //1.引入express
  3. const express = require('express');
  5. //2.创建应用对象
  6. const app = express();
  8. //3.创建路由规则
  9. // request 是对请求报文的封装
  10. //response 是对响应报文的封装
  11. app.get('/server',(request,response)=>{
  12.     //设置响应头 设置允许跨域
  13.     response.setHeader('Access-Control-Allow-Origin','*');
  14.     //设置响应体
  15.     response.send('HELLO AJAX');
  16. });
  17. //可以接受任意类型的请求
  18. app.all('/server',(request,response)=>{
  19.     //设置响应头 设置允许跨域
  20.     response.setHeader('Access-Control-Allow-Origin','*');
  21.     //响应头
  22.     response.setHeader('Access-Control-Allow-Headers','*');
  23.     //设置响应体
  24.     response.send('HELLO AJAX POST');
  25. });
  26. //可以接受任意类型的请求
  27. app.all('/json-server',(request,response)=>{
  28.     //设置响应头 设置允许跨域
  29.     response.setHeader('Access-Control-Allow-Origin','*');
  30.     //响应头
  31.     response.setHeader('Access-Control-Allow-Headers','*');
  32.     //响应一个数据
  33.     const data = {
  34.         name:'hjj'
  35.     };
  36.     //对对象进行字符串转换
  37.     const str = JSON.stringify(data);
  38.     //设置响应体
  39.     response.send(str);
  40. });
  42. //4.监听端口启动服务
  43. app.listen(8000,()=>{
  44.     console.log("服务已经启动，8000 端口监听中......");
  45. });
复制代码
  1. //JSON.html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>JSON响应</title>
  8.     <style>
  9.         #result{
  10.             width: 200px;
  11.             height: 100px;
  12.             border: solid 1px #903;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div id="result"></div>
  18.     <script>
  19.         //获取元素对象
  20.         const result = document.getElementById("result");
  21.         //绑定键盘按下事件
  22.         window.onkeydown = function(){
  23.             //1.发送请求
  24.             const xhr = new XMLHttpRequest();
  25.             //设置相应体的数据类型
  26.             xhr.responseType = 'json';
  27.             //2.初始化
  28.             xhr.open('GET','http://127.0.0.1:8000/json-server');
  29.             //3.发送
  30.             xhr.send();
  31.             //4.事件绑定 处理服务器返回的结果
  32.             xhr.onreadystatechange = function(){
  33.                 //判断（服务器返回了所有的结果）
  34.                 if(xhr.readyState === 4){
  35.                     //判断响应状态码 2xx就是成功的状态
  36.                     if(xhr.status >= 200 &&xhr.status < 300){
  37.                         //处理结果 行 头 空行 体
  38.                         //响应行
  39.                         //result.innerHTML = xhr.response;
  40.                         //1.手动对数据转换
  41.                         //let data = JSON.parse(xhr.response);
  42.                         //result.innerHTML = data.name;
  43.                         //console.log(xhr.response);
  44.                         //2.自动对数据转换
  45.                         console.log(xhr.response);
  46.                         result.innerHTML=xhr.response.name;
  47.                     }
  48.                 }
  49.             }
  50.         }
  51.     </script>
  52. </body>
  53. </html>
复制代码
   

  1.4.3 解决 IE 缓存问题

   问题：    在一些欣赏器中  (IE),  由于缓存机制的存在，  ajax   只会发送的第一次请求，剩余多次请求不会在发送给欣赏器而是直接加载缓存中的数据。     解决方式：    欣赏器的缓存是根据   url   地点来记载的，所以我们只需要修改   url   地点即可避免缓存问题     xhr.open("get","/testAJAX?t="+Date.now());   
  1. //server.js文件内容
  2. //1.引入express
  3. const express = require('express');
  5. //2.创建应用对象
  6. const app = express();
  8. //3.创建路由规则
  9. // request 是对请求报文的封装
  10. //response 是对响应报文的封装
  11. app.get('/server',(request,response)=>{
  12.     //设置响应头 设置允许跨域
  13.     response.setHeader('Access-Control-Allow-Origin','*');
  14.     //设置响应体
  15.     response.send('HELLO AJAX');
  16. });
  17. //可以接受任意类型的请求
  18. app.all('/server',(request,response)=>{
  19.     //设置响应头 设置允许跨域
  20.     response.setHeader('Access-Control-Allow-Origin','*');
  21.     //响应头
  22.     response.setHeader('Access-Control-Allow-Headers','*');
  23.     //设置响应体
  24.     response.send('HELLO AJAX POST');
  25. });
  26. //可以接受任意类型的请求
  27. app.all('/json-server',(request,response)=>{
  28.     //设置响应头 设置允许跨域
  29.     response.setHeader('Access-Control-Allow-Origin','*');
  30.     //响应头
  31.     response.setHeader('Access-Control-Allow-Headers','*');
  32.     //响应一个数据
  33.     const data = {
  34.         name:'hjj'
  35.     };
  36.     //对对象进行字符串转换
  37.     const str = JSON.stringify(data);
  38.     //设置响应体
  39.     response.send(str);
  40. });
  41. //针对IE缓存
  42. app.get('/ie',(request,response)=>{
  43.     //设置响应头 设置允许跨域
  44.     response.setHeader('Access-Control-Allow-Origin','*');
  45.     //设置响应体
  46.     response.send('HELLO IE');
  47. });
  48. //4.监听端口启动服务
  49. app.listen(8000,()=>{
  50.     console.log("服务已经启动，8000 端口监听中......");
  51. });
复制代码
  1. //4-IE缓存.html文件
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         #result{
  10.             width: 200px;
  11.             height: 100px;
  12.             border: solid 1px #258;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <button>点击发送请求</button>
  18.     <div id="result"></div>
  19.     <script>
  20.         //获取元素
  21.         const btn = document.getElementsByTagName('button')[0];
  22.         const result = document.querySelector('#result');
  23.         //绑定事件
  24.         btn.addEventListener('click',function(){
  25.             //1.发送请求
  26.             const xhr = new XMLHttpRequest();
  27.             //2.初始化
  28.             xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now());
  29.             //3.发送
  30.             xhr.send();
  31.             //4.事件绑定 处理服务器返回的结果
  32.             xhr.onreadystatechange = function(){
  33.                 //判断（服务器返回了所有的结果）
  34.                 if(xhr.readyState === 4){
  35.                     //判断响应状态码 2xx就是成功的状态
  36.                     if(xhr.status >= 200 &&xhr.status < 300){
  37.                         //处理结果 行 头 空行 体
  38.                         //响应行
  39.                         result.innerHTML=xhr.response;
  40.                     }
  41.                 }
  42.             }
  43.         })
  44.     </script>
  45. </body>
  46. </html>
复制代码

  1.4.4 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. //网络请求超时与网络异常.html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>网络请求超时与网络异常</title>
  8.     <style>
  9.         #result{
  10.             width: 200px;
  11.             height: 100px;
  12.             border: solid 1px #258;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <button>点击发送请求</button>
  18.     <div id="result"></div>
  19.     <script>
  20.         //获取元素
  21.         const btn = document.getElementsByTagName('button')[0];
  22.         const result = document.querySelector('#result');
  23.         //绑定事件
  24.         btn.addEventListener('click',function(){
  25.             //1.发送请求
  26.             const xhr = new XMLHttpRequest();
  27.             //超时设置 2s 设置
  28.             xhr.timeout = 2000;
  29.             //超时回调
  30.             xhr.ontimeout = function(){
  31.                 alert("网络异常，请稍后重试哦bb~")
  32.             }
  33.             //网络异常回调
  34.             xhr.onerror = function(){
  35.                 alert("你的网络似乎出了一些问题哦bb~")
  36.             }
  37.             //2.初始化
  38.             xhr.open("GET",'http://127.0.0.1:8000/delay');
  39.             //3.发送
  40.             xhr.send();
  41.             //4.事件绑定 处理服务器返回的结果
  42.             xhr.onreadystatechange = function(){
  43.                 //判断（服务器返回了所有的结果）
  44.                 if(xhr.readyState === 4){
  45.                     //判断响应状态码 2xx就是成功的状态
  46.                     if(xhr.status >= 200 &&xhr.status < 300){
  47.                         //处理结果 行 头 空行 体
  48.                         //响应行
  49.                         result.innerHTML=xhr.response;
  50.                     }
  51.                 }
  52.             }
  53.         })
  54.     </script>
  55. </body>
  56. </html>
复制代码
  1. //6-取消请求.html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>取消请求</title>
  8. </head>
  9. <body>
  10.     <button>点击发送请求</button>
  11.     <button>点击取消请求</button>
  12.     <script>
  13.         //获取元素对象
  14.         const btns = document.querySelectorAll('button');
  15.         let x=null;
  16.         btns[0].onclick = function(){
  17.             x = new XMLHttpRequest();
  18.             x.open("GET",'http://127.0.0.1:8000/delay');
  19.             x.send();
  20.         }
  21.         //取消请求abort
  22.         btns[1].onclick = function(){
  23.             x.abort();
  24.         }
  25.     </script>
  26. </body>
  27. </html>
复制代码
  1. //7-重复请求的问题.html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>取消请求</title>
  8. </head>
  9. <body>
  10.     <button>点击发送请求</button>
  11.     <script>
  12.         //获取元素对象
  13.         const btns = document.querySelectorAll('button');
  14.         let x=null;
  15.         //标识变量
  16.         let isSending = false;//是否正在发送AJAX请求
  18.         btns[0].onclick = function(){
  19.             //判断标示变量
  20.             if(isSending) x.abort();//如果正在发送 则取消该请求 创建一个新的请求
  21.             x = new XMLHttpRequest();
  22.             //修改 表示变量的值
  23.             isSending=true;
  24.             x.open("GET",'http://127.0.0.1:8000/delay');
  25.             x.send();
  26.             x.onreadystatechange = function(){
  27.                 if(x.readyState ===4){
  28.                     //修改标识变量
  29.                     isSending = false;
  30.                 }
  31.             }
  32.         }
  33.         //取消请求abort
  34.         btns[1].onclick = function(){
  35.             x.abort();
  36.         }
  37.     </script>
  38. </body>
  39. </html>
复制代码
  1. //上面几段代码涉及到的js文件server.js
  2. //1.引入express
  3. const express = require('express');
  5. //2.创建应用对象
  6. const app = express();
  8. //3.创建路由规则
  9. // request 是对请求报文的封装
  10. //response 是对响应报文的封装
  11. app.get('/server',(request,response)=>{
  12.     //设置响应头 设置允许跨域
  13.     response.setHeader('Access-Control-Allow-Origin','*');
  14.     //设置响应体
  15.     response.send('HELLO AJAX');
  16. });
  17. //可以接受任意类型的请求
  18. app.all('/server',(request,response)=>{
  19.     //设置响应头 设置允许跨域
  20.     response.setHeader('Access-Control-Allow-Origin','*');
  21.     //响应头
  22.     response.setHeader('Access-Control-Allow-Headers','*');
  23.     //设置响应体
  24.     response.send('HELLO AJAX POST');
  25. });
  26. //可以接受任意类型的请求
  27. app.all('/json-server',(request,response)=>{
  28.     //设置响应头 设置允许跨域
  29.     response.setHeader('Access-Control-Allow-Origin','*');
  30.     //响应头
  31.     response.setHeader('Access-Control-Allow-Headers','*');
  32.     //响应一个数据
  33.     const data = {
  34.         name:'hjj'
  35.     };
  36.     //对对象进行字符串转换
  37.     const str = JSON.stringify(data);
  38.     //设置响应体
  39.     response.send(str);
  40. });
  41. //针对IE缓存
  42. app.get('/ie',(request,response)=>{
  43.     //设置响应头 设置允许跨域
  44.     response.setHeader('Access-Control-Allow-Origin','*');
  45.     //设置响应体
  46.     response.send('HELLO IE');
  47. });
  48. //延时响应
  49. app.get('/delay',(request,response)=>{
  50.     //设置响应头 设置允许跨域
  51.     response.setHeader('Access-Control-Allow-Origin','*');
  52.     setTimeout(()=>{
  53.         //设置响应体
  54.     response.send('延时响应');
  55.     },3000)
  56. });
  57. //4.监听端口启动服务
  58. app.listen(8000,()=>{
  59.     console.log("服务已经启动，8000 端口监听中......");
  60. });
复制代码

    第 2 章：jQuery 中的 AJAX

  2.1 get 请求

     $.get(url, [data], [callback], [type])        url:   请求的    URL    地点。        data:   请求携带的参数。        callback:   载入乐成时回调函数。        type:   设置返回内容格式，   xml, html, script, json, text, _default   。   
  1. //server.js文件
  2. //1.引入express
  3. const express = require('express');
  5. //2.创建应用对象
  6. const app = express();
  8. //3.创建路由规则
  9. // request 是对请求报文的封装
  10. //response 是对响应报文的封装
  11. app.get('/server',(request,response)=>{
  12.     //设置响应头 设置允许跨域
  13.     response.setHeader('Access-Control-Allow-Origin','*');
  14.     //设置响应体
  15.     response.send('HELLO AJAX');
  16. });
  18. //4.监听端口启动服务
  19. app.listen(8000,()=>{
  20.     console.log("服务已经启动，8000 端口监听中......");
  21. });
复制代码
   
  1. //GET.html文件
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>AJAX GET 请求</title>
  8.     <style>
  9.         #result{
  10.             width: 200px;
  11.             height: 100px;
  12.             border: solid 1px #90b;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <button>点击发送请求</button>
  18.     <div id="result"></div>
  19.     <script>
  20.         //获取button元素
  21.         const btn = document.getElementsByTagName('button')[0];
  22.         const result = document.getElementById("result");
  23.         //绑定事件
  24.         btn.onclick = function(){
  25.             //1.创建对象
  26.             const xhr = new XMLHttpRequest();
  27.             //2.初始化 设置请求方法和url
  28.             xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');
  29.             //3.发送
  30.             xhr.send();
  31.             //4.事件绑定 处理服务器返回的结果
  32.             //on when 当。。。的时候
  33.             //readystate 是 xhr对象中的属性，表示状态0 1 2 3 4
  34.             //change 改变
  35.             xhr.onreadystatechange = function(){
  36.                 //判断（服务器返回了所有的结果）
  37.                 if(xhr.readyState === 4){
  38.                     //判断响应状态码 2xx就是成功的状态
  39.                     if(xhr.status >= 200 &&xhr.status < 300){
  40.                         //处理结果 行 头 空行 体
  41.                         //1.响应行
  42.                         // console.log(xhr.status);//状态码
  43.                         // console.log(xhr.statusText);//状态字符串
  44.                         // console.log(xhr.getAllResponseHeaders());//所有响应头
  45.                         // console.log(xhr.response);//响应体
  46.                         result.innerHTML = xhr.response;
  47.                     }
  48.                 }
  49.             }
  51.         }
  52.     </script>
  53. </body>
  54. </html>
复制代码
   


  2.2 post 请求

     $.post(url, [data], [callback], [type])        url:   请求的    URL    地点。        data:   请求携带的参数。        callback:   载入乐成时回调函数。        type:   设置返回内容格式，   xml, html, script, json, text, _default   。      
  1. //server.js文件
  2. //1.引入express
  3. const express = require('express');
  5. //2.创建应用对象
  6. const app = express();
  8. //3.创建路由规则
  9. // request 是对请求报文的封装
  10. //response 是对响应报文的封装
  11. app.get('/server',(request,response)=>{
  12.     //设置响应头 设置允许跨域
  13.     response.setHeader('Access-Control-Allow-Origin','*');
  14.     //设置响应体
  15.     response.send('HELLO AJAX');
  16. });
  18. app.post('/server',(request,response)=>{
  19.     //设置响应头 设置允许跨域
  20.     response.setHeader('Access-Control-Allow-Origin','*');
  21.     //设置响应体
  22.     response.send('HELLO AJAX POST');
  23. });
  25. //4.监听端口启动服务
  26. app.listen(8000,()=>{
  27.     console.log("服务已经启动，8000 端口监听中......");
  28. });
复制代码
  

   

   

  
  1. //POST.html文件
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>AJAX POST 请求</title>
  8.     <style>
  9.         #result{
  10.             width: 200px;
  11.             height: 100px;
  12.             border: solid 1px #903;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div id="result"></div>
  18.     <script>
  19.         //获取元素对象
  20.         const result = document.getElementById("result");
  21.         //绑定事件
  22.         result.addEventListener("mouseover",function(){
  23.             //1.创建对象
  24.             const xhr = new XMLHttpRequest();
  25.             //2.初始化 设置请求方法和url
  26.             xhr.open('POST','http://127.0.0.1:8000/server');
  27.             //3.发送
  28.             xhr.send('a=100&b=200&c=300');
  29.             //4.事件绑定 处理服务器返回的结果
  30.             xhr.onreadystatechange = function(){
  31.                 //判断（服务器返回了所有的结果）
  32.                 if(xhr.readyState === 4){
  33.                     //判断响应状态码 2xx就是成功的状态
  34.                     if(xhr.status >= 200 &&xhr.status < 300){
  35.                         //处理结果 行 头 空行 体
  36.                         //1.响应行
  37.                         result.innerHTML = xhr.response;
  38.                     }
  39.                 }
  40.             }
  41.         })
  42.         
  43.     </script>
  44. </body>
  45. </html>
复制代码
  2.3 设置请求头信息

   【open后，send前】
  
  1. //server.js文件
  2. //1.引入express
  3. const express = require('express');
  5. //2.创建应用对象
  6. const app = express();
  8. //3.创建路由规则
  9. // request 是对请求报文的封装
  10. //response 是对响应报文的封装
  11. app.get('/server',(request,response)=>{
  12.     //设置响应头 设置允许跨域
  13.     response.setHeader('Access-Control-Allow-Origin','*');
  14.     //设置响应体
  15.     response.send('HELLO AJAX');
  16. });
  17. //可以接受任意类型的请求
  18. app.all('/server',(request,response)=>{
  19.     //设置响应头 设置允许跨域
  20.     response.setHeader('Access-Control-Allow-Origin','*');
  21.     //响应头
  22.     response.setHeader('Access-Control-Allow-Headers','*');
  23.     //设置响应体
  24.     response.send('HELLO AJAX POST');
  25. });
  27. //4.监听端口启动服务
  28. app.listen(8000,()=>{
  29.     console.log("服务已经启动，8000 端口监听中......");
  30. });
复制代码
  1. //POST.html文件修改部分
  3. <body>
  4.     <div id="result"></div>
  5.     <script>
  6.         //获取元素对象
  7.         const result = document.getElementById("result");
  8.         //绑定事件
  9.         result.addEventListener("mouseover",function(){
  10.             //1.创建对象
  11.             const xhr = new XMLHttpRequest();
  12.             //2.初始化 设置请求方法和url
  13.             xhr.open('POST','http://127.0.0.1:8000/server');
  14.             //设置请求头
  15.             xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  16.             xhr.setRequestHeader('name','hjj');
  17.             //3.发送
  18.             xhr.send('a=100&b=200&c=300');
  19.             //4.事件绑定 处理服务器返回的结果
  20.             xhr.onreadystatechange = function(){
  21.                 //判断（服务器返回了所有的结果）
  22.                 if(xhr.readyState === 4){
  23.                     //判断响应状态码 2xx就是成功的状态
  24.                     if(xhr.status >= 200 &&xhr.status < 300){
  25.                         //处理结果 行 头 空行 体
  26.                         //1.响应行
  27.                         result.innerHTML = xhr.response;
  28.                     }
  29.                 }
  30.             }
  31.         })
  32.         
  33.     </script>
  34. </body>
复制代码
  

   第 3 章：跨域

   3.1 同源战略

       同源战略    (Same-Origin Policy)    最早由     Netscape     公司提出，是欣赏器的一种安全战略。           同源： 协议、域名、端口号 必须完全类似。违背同源战略就是跨域。          
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>同域请求</title>
  7. </head>
  8. <body>
  9.     <h1>hjj</h1>
  10.     <button>点击获取用户数据</button>
  11.     <script>
  12.         const btn = document.querySelector('button')
  13.         btn.onclick = function(){
  14.             const x = new XMLHttpRequest();
  15.             //因为这里是同域问题，所以url可以简写
  16.             x.open("GET",'/data');
  17.             //发送
  18.             x.send();
  19.             //检查状态
  20.             x.onreadystatechange = function(){
  21.                 if(x.readyState === 4){
  22.                     if(x.status >= 200 && x.status < 300){
  23.                         console.log(x.response);
  24.                     }
  25.                 }
  26.             }
  27.         }
  28.         
  29.     </script>
  30. </body>
  31. </html>
复制代码
  
  1. //server.js
  2. const express = require('express');
  3. const app = express();
  4. app.get('/home',(request,response)=>{
  5.     //响应一个页面
  6.     response.sendFile(__dirname+'/index.html');
  7. });
  8. app.get('/data',(request,response)=>{
  9.     response.send('用户数据');
  10. });
  11. app.listen(9000,()=>{
  12.     console.log("服务已经启动...");
  13. });
复制代码
     3.2 如何解决跨域

   3.2.1 JSONP

       1.JSONP 是什么           JSONP(JSON with Padding)    ，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get     请求。           2.JSONP 怎么工作的？           在网页有一些标签天生具有跨域能力，比如：    img link iframe script    。           JSONP     就是利用     script     标签的跨域能力来发送请求的。           3. JSONP 的使用           27.尚硅谷_AJAX-jsonp的实现原理_哔哩哔哩_bilibili          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    >       3.2.2 CORS

       https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS           30.尚硅谷_AJAX-设置CORS响应头实现跨域_哔哩哔哩_bilibili          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 返回的响应");                   });           4.安装nodemon报错记载

   
  1. PS C:\Users\jinju\Desktop\前端学习\练习版本\AJAX\原生AJAX> Get-ExecutionPolicy
  2. Restricted
  3. PS C:\Users\jinju\Desktop\前端学习\练习版本\AJAX\原生AJAX> Set-ExecutionPolicy RemoteSigned
  4. PS C:\Users\jinju\Desktop\前端学习\练习版本\AJAX\原生AJAX> nodemon server.js  
  5. [nodemon] 3.1.7
  6. [nodemon] to restart at any time, enter `rs`
  7. [nodemon] watching path(s): *.*
  8. [nodemon] watching extensions: js,mjs,cjs,json
  9. [nodemon] starting `node server.js`
  10. node:internal/modules/cjs/loader:1137
  11.   throw err;
  12.   ^
  14. Error: Cannot find module 'express'
  15. Require stack:
  16. - C:\Users\jinju\Desktop\前端学习\练习版本\AJAX\原生AJAX\server.js
  17.     at Module._resolveFilename (node:internal/modules/cjs/loader:1134:15)
  18.     at Module._load (node:internal/modules/cjs/loader:975:27)
  19.     at Module.require (node:internal/modules/cjs/loader:1225:19)
  20.     at require (node:internal/modules/helpers:177:18)
  21.     at Object.<anonymous> (C:\Users\jinju\Desktop\前端学习\练习版本\AJAX\原生AJAX\server.js:2:17)
  22.     at Module._compile (node:internal/modules/cjs/loader:1356:14)
  23.     at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
  24.     at Module.load (node:internal/modules/cjs/loader:1197:32)
  25.     at Module._load (node:internal/modules/cjs/loader:1013:12)
  26.     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:128:12) {
  27.   code: 'MODULE_NOT_FOUND',
  28.   requireStack: [ 'C:\\Users\\jinju\\Desktop\\前端学习\\练习版本\\AJAX\\原生AJAX\\server.js' ]
  29. }
  31. Node.js v18.19.0
  32. [nodemon] app crashed - waiting for file changes before starting...
  33. npm install express
  34. PS C:\Users\jinju\Desktop\前端学习\练习版本\AJAX\原生AJAX> npm install express
  36. added 65 packages, and audited 66 packages in 7s
  38. 13 packages are looking for funding
  39.   run `npm fund` for details
  41. found 0 vulnerabilities
  42. PS C:\Users\jinju\Desktop\前端学习\练习版本\AJAX\原生AJAX> nodemon server.js
  43. [nodemon] 3.1.7
  44. [nodemon] to restart at any time, enter `rs`
  45. [nodemon] watching path(s): *.*
  46. [nodemon] watching extensions: js,mjs,cjs,json
  47. [nodemon] starting `node server.js`
  48. 服务已经启动，8000 端口监听中......
复制代码
   

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

海哥

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表