Ajax的简介和使用

于 2024-07-12 15:31:17 发布
阅读量820 收藏 27
点赞数 8
文章标签： ajax 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72131231/article/details/140346480
版权

一、Ajax简介

        AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。

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

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

1、XML简介

  1. XML 可扩展标记语言。

  2. XML 被设计用来传输和存储数据。

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

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

1
2
3
4
5
6

用 XML 表示：
<student>
<name>孙悟空</name>
<age>18</age>
<gender>男</gender>
</student>

现在已经被 JSON 取代了。

1

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

2、Ajax的特点

（1）AJAX 的优点

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

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

（2）Ajax的缺点

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

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

  3. SEO 不友好

3、HTTP简介

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

（1）请求报文

1
2
3
4
5
6
7
8

>行   POST /s?ie=utf-8 HTTP/1.1
/s:表示路径   ie=utf-8:表示编码方式的查询参数
HTTP/1.1:表示使用的 HTTP 协议版本。
>头   Host: atguigu.com  //指定服务器的主机名或 IP 地址
>​    Cookie: name=guigu  //包含在此请求中发送到服务器的 cookie 数据
>​    Content-type: application/x-www-form-urlencoded  //指定请求体的数据类型。在这里，是表单数据的 MIME 类型。
>​    User-Agent: chrome 83  //发起请求的客户端浏览器和版本信息。 

>空行

>体   username=admin&password=admin //实际要发送到服务器的数据。这里使用的是 application/x-www-form-urlencoded 格式，即键值对形式的表单数据

（2）响应报文

1
2
3
4
5
6
7
8
9
10
11
12
13

>行   HTTP/1.1 200 OK 
HTTP/1.1:表示使用的 HTTP 协议版本。
200 OK:表示服务器成功处理了请求。200是状态码，表示成功；OK是状态码的短语描述。
>头   Content-Type: text/html;charset=utf-8 //指定了响应体的类型为text/html，即 HTML 文档；并且指定了字符编码为 UTF-8，确保浏览器正确地解析和显示文本内容。
>​    Content-length: 2048  //响应体的长度为 2048 字节。浏览器在接收完这么多字节后会认为响应体已经接收完毕。
>​    Content-encoding: gzip //响应体使用了 gzip 压缩算法进行了压缩。有助于减少数据传输时的网络带宽消耗，提高传输效率

>空行  

>体   <html>
>​      <head>
>​      </head>
>​      <body>
>​        <h1>尚硅谷</h1>
>​      </body>
>​    </html>

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

1、Network –> Hearders 请求头

2、Network –> Response 响应体:通常返回的是html

二、原生Ajax

1、XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。

2、当前端想设置自定义的请求头时,需要让后端设置响应头

1
2
3

//表示接收任意类型的请求							
app.all('/server', (request, response) => { 

//响应头 允许跨域     运行自定义响应头
response.setHeader('Access-Control-Allow-Origin', '*'); response.setHeader('Access-Control-Allow-Headers', '*');}

3、ajax请求状态:xhr.readyState


 0：请求未初始化，还没有调用 open()。

​ 1：请求已经建立，但是还没有发送，还没有调用 send()。

​ 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。

​ 3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。

​ 4：响应已完成；您可以获取并使用服务器的响应了

4、Ajax的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

（1）Get方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

//绑定事件
btn.onclick = function () {
  //1. 创建对象
  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
      // 2xx 成功
      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 {}
    }
  }
}

（2）Post方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

//绑定事件
   result.addEventListener("mouseover", function(){
       //1. 创建对象
       const xhr = new XMLHttpRequest();
       //2. 初始化 设置类型与 URL
       xhr.open('POST', 'http://127.0.0.1:8000/server');
       //设置请求头
       xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
       xhr.setRequestHeader('name','atguigu');
       //3. 发送
       xhr.send('a=100&b=200&c=300');
       // xhr.send('a:100&b:200&c:300');
       // xhr.send('1233211234567');
       //4. 事件绑定
       xhr.onreadystatechange = function(){
           //判断
           if(xhr.readyState === 4){
               if(xhr.status >= 200 && xhr.status < 300){
                   //处理服务端返回的结果
                   result.innerHTML = xhr.response;
               }
           }
       }
   });

（3）解决ie缓存问题

问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会再发送给浏览器而是直接加载缓存中的数据。

解决方式：浏览器的缓存是根据 url地址来记录的，所以我们只需要修改 url 地址 即可避免缓存问题 xhr.open("get","/testAJAX?t="+Date.now());

（4）请求超时与网络异常

当你的请求时间过长,或者无网络时,进行的相应处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

（5）取消请求

在请求发出去后但是未响应完成时可以进行取消请求操作

1
2
3
4
5
6
7
8
9
10
11

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();
}
// abort
btns[1].onclick = function(){
    x.abort();
}

（6）重复请求问题

利用之前取消请求知识点,当我点击时判断之前请求是否在发送中,如果是,则停止请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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;
             }
         }
     }

三、常见三种Ajax请求方式

1、jQuery发送AJAX请求

jQuery有三种发送请求方法:

当你只是简单的请求数据,可以直接使用前两种方式请求,当你需要设置的东西较多的时候,可以使用$.ajax()方法

（1）$.get()

1
2
3
4
5

$('button').eq(0).click(function(){
          $.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
              console.log(data);
          },'json');
      });

（2）$.post()

1
2
3
4
5

$('button').eq(1).click(function(){
          $.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
              console.log(data);
          });
      });

（3）$.ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

$('button').eq(2).click(function(){
         $.ajax({
             //url
             url: 'http://127.0.0.1:8000/jquery-server',
             //参数
             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
             }
         });
     });

2、Axios发送AJAX请求

（1）axios.get()

axios.get(url,data,params)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//配置 baseURL
  axios.defaults.baseURL = 'http://127.0.0.1:8000';

  btns[0].onclick = function () {
    //GET 请求
    axios.get('/axios-server', {
      //url 参数
      params: {
        id: 100,
        vip: 7
      },
      //请求头信息
      headers: {
        name: 'atguigu',
        age: 20
      }
    }).then(value => {
      console.log(value);
    });
  }

（2）axios.post()

axios.post(url,data,params)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

 //配置 baseURL
   axios.defaults.baseURL = 'http://127.0.0.1:8000';  
btns[1].onclick = function () {
     axios.post('/axios-server', {
       username: 'admin',
       password: 'admin'
     }, {
       //url 
       params: {
         id: 200,
         vip: 9
       },
       //请求头参数
       headers: {
         height: 180,
         weight: 180,
       }
     });
   }

（3）axios() 常用

axios({})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

 //配置 baseURL
   axios.defaults.baseURL = 'http://127.0.0.1:8000';
btns[2].onclick = function () {
     axios({
       //请求方法
       method: 'POST',
       //url
       url: '/axios-server',
       //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);
     })
   }

3、Fetch发送AJAX请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

btn.onclick = function () {
    fetch('http://127.0.0.1:8000/fetch-server?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);
    });
  }

四、跨域与解决

1、什么是跨域？

  • 一个网页向另一个不同域名/不同协议/不同端口的网页请求资源。
  • 跨域原因产生：在当前域名请求网站中，默认不允许通过ajax请求发送其他域名。

2、为什么会产生跨域请求？

  • 因为浏览器使用了同源策略

3、什么是同源策略？

  • 同源策略是Netscape提出的一个著名的安全策略，现在所有支持JavaScript的浏览器都会使用这个策略。同源策略是浏览器最核心也最基本的安全功能，如果缺少同源策略，浏览器的正常功能可能受到影响。可以说web是构建在同源策略的基础之上的，浏览器只是针对同源策略的一种实现。
  • 同源： 协议、域名、端口号 必须完全相同。 违背同源策略就是跨域。

4、为什么浏览器要使用同源策略？

为了保证用户的信息安全，防止恶意网站窃取数据，如果网页之间不满足同源要求，将不能:

（1）共享Cookie、LocalStorage、IndexDB；

（2）获取DOM；

（3）AJAX请求不能发送；

5、跨域的五个解决方式:

​ （1）前端使用jsonp （不推荐使用）

  • JSONP 是什么?

​ JSONP(JSON with Padding)，是一个非官方的跨域解决方案，只支持 get 请求。

  • JSONP 怎么工作的？

​ 在网页有一些标签天生具有跨域能力，比如：img link iframe script。 JSONP 就是利用 script 标签的跨域能力来发送请求的。

  • jsonP的使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

  // 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 = {
       ame: "孙悟空",
       age: 18
     }
     res.send(callback + "(" + JSON.stringify(obj) + ")");
   });
 jQuery发送jsonP请求 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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

//服务端代码
app.all('/jquery-jsonp-server', (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})`);
});

​ （2）后台Http请求转发

​ （3）后台配置同源Cors （推荐）

 2、CORS

（1） CORS文档链接

（2）CORS是什么?

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

（3）CORS是怎么工作的?

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

Ⅰ-代码示例

1
2
3
4
5
6
7
8
9
10
11

app.all('/cors-server', (request, response) => {
  //设置响应头
    //响应首部中可以携带一个 Access-Control-Allow-Origin 字段
  response.setHeader("Access-Control-Allow-Origin", "*");
    //Access-Control-Allow-Headers 首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字
  response.setHeader("Access-Control-Allow-Headers", '*');
    //Access-Control-Allow-Methods 首部字段用于预检请求的响应。其指明了实际请求所允许使用的 HTTP
  response.setHeader("Access-Control-Allow-Method", '*');
  // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
  response.send('hello CORS');
});

Ⅱ-HTTP 响应首部字段

响应首部中可以携带一个 Access-Control-Allow-Origin 字段，其语法如下:

1

>Access-Control-Allow-Origin: <origin> | *

其中，origin 参数的值指定了允许访问该资源的外域 URI。对于不需要携带身份凭证的请求，服务器可以指定该字段的值为通配符，表示允许来自所有域的请求。

例如，下面的字段值将允许来自 http://mozilla.com 的请求：

1

>Access-Control-Allow-Origin: http://mozilla.com

如果服务端指定了具体的域名而非“*”，那么响应首部中的 Vary 字段的值必须包含 Origin。这将告诉客户端：服务器对不同的源站返回不同的内容。

译者注：在跨源访问时，XMLHttpRequest对象的getResponseHeader()方法只能拿到一些最基本的响应头，Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，如果要访问其他头，则需要服务器设置本响应头。

Access-Control-Expose-Headers 头让服务器把允许浏览器访问的头放入白名单，例如：

1

>Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header

这样浏览器就能够通过getResponseHeader访问X-My-Custom-Header和 X-Another-Custom-Header 响应头了。

Access-Control-Max-Age 头指定了preflight请求的结果能够被缓存多久，请参考本文在前面提到的preflight例子。

1

>Access-Control-Max-Age: <delta-seconds>

delta-seconds 参数表示preflight请求的结果在多少秒内有效。

Access-Control-Allow-Credentials 头指定了当浏览器的credentials设置为true时是否允许浏览器读取response的内容。当用在对preflight预检测请求的响应中时，它指定了实际的请求是否可以使用credentials。请注意：简单 GET 请求不会被预检；如果对此类请求的响应中不包含该字段，这个响应将被忽略掉，并且浏览器也不会将相应内容返回给网页。

1

>Access-Control-Allow-Credentials: true

Access-Control-Allow-Methods 首部字段用于预检请求的响应。其指明了实际请求所允许使用的 HTTP 方法。

1

>Access-Control-Allow-Methods: <method>[, <method>]*

Access-Control-Allow-Headers 首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字段。

1

>Access-Control-Allow-Headers: <field-name>[, <field-name>]*

Ⅲ-HTTP 请求首部字段

本节列出了可用于发起跨源请求的首部字段。请注意，这些首部字段无须手动设置。 当开发者使用 XMLHttpRequest 对象发起跨源请求时，它们已经被设置就绪。

Origin 首部字段表明预检请求或实际请求的源站。

1

>Origin: <origin>

origin 参数的值为源站 URI。它不包含任何路径信息，只是服务器名称。

Note: 有时候将该字段的值设置为空字符串是有用的，例如，当源站是一个 data URL 时。

注意，在所有访问控制请求（Access control request）中，Origin 首部字段总是被发送

Access-Control-Request-Method 首部字段用于预检请求。其作用是，将实际请求所使用的 HTTP 方法告诉服务器。

1

>Access-Control-Request-Method: <method>

Access-Control-Request-Headers 首部字段用于预检请求。其作用是，将实际请求所携带的首部字段告诉服务器。

1

>Access-Control-Request-Headers: <field-name>[, <field-name>]*

​ （4）使用SpringCloud网关

​ （5）使用nginx做转发 (推荐)

 

五、服务端代码示例

配合以上前端代码的服务端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

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

//可以接收任意类型的请求 
app.all('/server', (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  //响应头
  response.setHeader('Access-Control-Allow-Headers', '*');
  //设置响应体
  response.send('HELLO AJAX POST');
});

//JSON 响应
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);
});

//针对 IE 缓存
app.get('/ie', (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  //设置响应体
  response.send('HELLO IE - 5');
});

//延时响应
app.all('/delay', (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  response.setHeader('Access-Control-Allow-Headers', '*');
  setTimeout(() => {
    //设置响应体
    response.send('延时响应');
  }, 1000)
});

//jQuery 服务
app.all('/jquery-server', (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  response.setHeader('Access-Control-Allow-Headers', '*');
  // response.send('Hello jQuery AJAX');
  const data = {
    name: '尚硅谷'
  };
  response.send(JSON.stringify(data));
});

//axios 服务
app.all('/axios-server', (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  response.setHeader('Access-Control-Allow-Headers', '*');
  // response.send('Hello jQuery AJAX');
  const data = {
    name: '尚硅谷'
  };
  response.send(JSON.stringify(data));
});

//fetch 服务
app.all('/fetch-server', (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  response.setHeader('Access-Control-Allow-Headers', '*');
  // response.send('Hello jQuery AJAX');
  const data = {
    name: '尚硅谷'
  };
  response.send(JSON.stringify(data));
});

//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-username', (request, response) => {
  // response.send('console.log("hello jsonp")');
  const data = {
    exist: 1,
    msg: '用户名已经存在'
  };
  //将数据转化为字符串
  let str = JSON.stringify(data);
  //返回结果
  response.end(`handle(${str})`);
});

//
app.all('/jquery-jsonp-server', (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})`);
});

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 端口监听中....");
});
m0_72131231
关注
  • 8
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax
08-05
NULL 博文链接：https://mytdyhm123456.iteye.com/blog/2037126
Ajax简介与基本使用
11-21
Ajax简介与基本使用 Ajax简介 Ajax即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需...
ajax的用法
zyilove34的博客
11-21 453
ajax的全称是Asynchronous JavaScript and XML，其实是一个组合而得来的新知识 1原始的ajax的使用方法 ajax使用的四个步骤 1.1收下获得xmlhttprequest对象，由于不同浏览器获取该对象的方式不同，因此这里写一个函数来获取该对象。具体如下所示： var getXmlhttprequest=function(){ try{ ...
AJAX经常遇到的那些问题
weixin_30371875的博客
05-16 290
本文主要介绍了AJAX工作原理以及在面试题经常会遇到的问题，目录如下： 什么是Ajax 为什么要使用Ajax？ Ajax特点？ AJAX优缺点？ Ajax流程？ XMLhttprequest对象 AJAX请求总共有多少种CALLBACK？ AJAX应用和传统Web应用有什么不同？ Ajax应用场景 什么是XML XML的解析方式 什么是Ajax？ AJAX是Asyn...
Ajax基本用法
bingocoder的博客
06-01 522
        Ajax的全称是：Asynchronous JavaScript and Xml。常用于B/S架构上，是实现客户端与服务器端异步交互的主要手段。浏览器与服务器端的交互有同步，异步两种，有何差别呢？        同步交互：指客户端向服务器端发送请求，到服务器端进行响应，这个过程不能做其他的事情，只有等待请求完成。        异步交互：指客户端向服务器端发送请求，到服务器端进行响...
Ajax的使用（最详细！！！）
最新发布
2401_84150165的博客
04-12 855
正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往获取》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**[外链图片转存中…(img-D3eLHlmw-1712864683413)][外链图片转存中…(img-KYWdmD5f-1712864683413)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
Ajax简介
03-03
火龙果软件工程技术中心 ...本文介绍一种方法，Ajax，使用它可以构建更为动态和响应更灵敏的Web应用程序。该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通信的组合。本文也演示了启用这种方法是多么
JQueryAjax的简介
11-18
Ajax 是 Asynchronous JavaScript and XML（异步 JavaScript 和 XML）的缩写，它并不是一种单一的技术，而是一系列用于创建交互式网页应用程序技术的集合。通过 Ajax 技术，开发者可以在不重新加载整个网页的情况下...
零基础学习AJAX之AJAX的简介和基础
10-24
本系列我们将来逐步学习ajax，作为本系列的开篇文章，我们还是俗套些，先来讲解下ajax的简介和基础知识吧。
ajax详细用法
qq_39897978的博客
07-30 1万+
一、基础知识 1、首先让我们了解ajax----------------        通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 2、ajax的核心步骤： 创建XMLHttpRequest对象 发送（异步）请求 接收相应请求，并且执...
AJAX最基本的两种使用方法
宁以至远
05-28 7143
实际使用ajax的过程，可能还是要从周边一些知识开始了解，对于最初步的应用来讲，可能我们只是想获得最基本的ajax效果，即：在不刷新整个页面的情况下，根据用户的操作或输入来局部刷新页面的内容。下面记录两种最基本的使用方法：（1）    使用XMLHTTP：首先在页面创建两个控件如下：input id="Button3" type="button" value="显示水果" onclic
jQuery中ajax的用法
Me丿以卿之名
09-13 737
Query是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJA
ajax使用方法
阿鹏的博客
05-21 2万+
ajax一个前后台配合的技术，它可以让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。jquery将它封装成了一个函数$.ajax()，我们可以直接用这个函数来执行ajax请求。 ajax需要在服务器环境下运行。 $.ajax使用方法 常用参数： 1、url 请求地址 2、type 请求方式，默认是’GET’，常...
jQuery-Ajax格式用法
路遥知马力
09-30 763
jQuery.ajax({ type: "POST", url: "",// 要请求的后台页面 data: "" ,// 要传的参数 dataType:'json', success: function(json){ 得到json 内容 赋值给标签 }, error:function(){
ajax的常见几种写法以及用法
热门推荐
wickedvalley
03-25 3万+
一、服务端数据格式1.自定义po类package com.hbut.ssm.po; /** * pojo类 * */ public class Children { private String name; private Integer age; private String gender; public Children(String name, Integer age,...
Ajax的用法
bankser的博客
03-28 3163
文章目录前言一、Ajax的概念二、实现方式1.$.ajax()2.$.get()3.$.post()总结 前言 ajax是在学习JavaWeb阶段非常重要的内容，是提高用户体验感最重要的技术之一。 一、Ajax的概念   AJAX：ASynchronous JavaScript And XML：异步的JavaScript和XML。   异步和同步：客户端和服务器端互相通信的基础上   同步：客户端必须等待服务器响应。在等待的期间客户端不能做其它操作。   异步：客户端不需要等待服务器端的响应。在服务
AJAX的使用及规范格式
JackMaster_xh的博客
08-25 745
第一个用户登录验证为例： @RequestMapping(value = "/login",method = RequestMethod.POST) @ResponseBody public Map login(Model model, User user, HttpSession session) { Map map=new HashMap<>();
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值