随笔- 131 文章- 0 评论- 2 阅读- 54098

Ajax-基础

1. 简介

　　Ajax（Asynchronous JavaScript and xml）就是异步的JS和XML；

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

　　广义：
　　同步：刷新页面
　　异步：刷新局部

　　一个请求仅有一个响应；

2. 优缺点　　

　　Ajax 的优点：

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

　　Ajax 的缺点：

　没有历史记录
　存在跨域问题 (同源策略，如从 a.com 发送请求到 b.com中)
SEO 不友好 (搜索引擎的优化不友好)

3. HTTP协议

　　　　HTTP（hypertext transport protocol）：是基于TCP 的超文本传输协议。

　　　　　详细规定了浏览器和万维网服务器之间的互相通信的规则。

　　　　不支持服务端主动给客户端发送请求

　　　　① HTTP请求：
　　　　请求方法：动作：get、post；
　　　　　　get：查、获取；明文；通常用于从指定资源请求数据；字符限制为 2083个字符；

- - - - GET 请求可被缓存；

- - - - GET 请求保留在浏览器历史记录中；

- - - - GET 请求不应在处理敏感数据时使用；

- - - - GET 请求有长度限制；

- - - - GET 请求只应当用于取回数据；

　　　　　　post：增删改；密文；通常用于向指定的资源提交要被处理的数据；　　

- - - - 　POST 请求不会被缓存；

- - - - 　POST 请求不会保留在浏览器历史记录中，不会在 url 中显示所以是安全的；

- - - - 　POST 请求对数据长度没有要求；

- - - - 　POST 方法主要是向服务器提交数据，尤其是大批量的数据；

　　　　请求的url：地址

　　　　请求头：包含客户端环境信息，身份信息等。
　　　　请求体：请求正文包含客户提交的查询字符串信息，表单信息等。

　　　　② HTTP响应：

- 数字和文字组成的状态码，用于显示请求的状态。(成功/失败)
- 请求头（Response Headers）：服务器类型，日期时间等...

　　　　　　　　　　与

- 响应头（Request Headers）：相应正文；

　　　　　都是私密的。

4. HTTP状态码

　　　　　(前端）100~199 表示连接成功；

　　　　　　　　 200~299 表示各种意义上的成功；

　　　　　　　　 300~399 表示重定向；

　　　　　　　　 400~499 表示客户端错误；

　　　　　　　　 500~599 表示服务端错误；

　　　　　　　　(出现状态码报错可直接按照状态码信息查询解决)

5. JQuery 中的 Ajax 与 JS中的Ajax

　　① JS 中的 Ajax：

- - 创建XMLHttpRequest( ) 对象
  - 连接（请求方法，请求地址：url，是否异步，默认异步（true））
  - 发送请求 send();
  - 成功！

　　　　　　　　0：未初始化，未调用open；
　　　　　　　　1：已初始化，未调用send；
　　　　　　　　2：已初始化，未调用send；
　　　　　　　　3：数据还在在传输中；
　　　　　　　　4：成功！

　代码：

 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>JS-Ajax</title>
 7 </head>
 8 <body>
 9     <!-- 包导入 -->
10     <script src="../jquery-1.8.3.min.js"></script>
11 
12     <script>
13         // JS的Ajax
14         // 1.新建XMLHttpRequest() 对象；
15         var lb  = new XMLHttpRequest();
16 
17         // 2.连接(请求方法：get/post 请求地址 url。默认异步)
18         lb.open("get","JS.txt");  // url地址放在同级目录里
19 
20         // 3. 发送请求send()；
21         lb.send();
22 
23         // 4. 成功！
24         lb.onreadystatechange = function(){
25             if(lb.readyState === 4 && lb.status === 200){
26                 console.log("成功！");
27             }else{
28                 console.log("失败！");
29             }
30         }
31             // 0：没初始化，没调用open
32             // 1: 初始化了，没调用send
33             // 2: 初始化了，调用send
34             // 3: 数据还在传输中。
35     </script>
36 </body>
37 </html>

　　　② JQuery 中的 Ajax：

　　　　　　　　发送到服务器的数据，格式是json格式或者json字符串格式。如果是GET 请求，系统就通过 url 传递；如果是 POST 请求，系统就通过设置请求体传递。

　　　　　　　　　　该回调函数中的第一个参数是服务器返回的数据（拿到的只是数据），它会自动根据服务端响应的 Content-type 自动转换为对象，如果服务端没有设置响应头Content-type，返回的还是字符串类型的数据。

　　代码：

 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>JQuery-Ajax</title>
 7 </head>
 8 <body>
 9     <!-- 包引入 -->
10     <script src="../jquery-1.8.3.min.js"></script>
11 
12     <!-- JQuery中的Ajax -->
13     <script>
14         $.ajax({
15             // 1. 请求地址
16             url:"JQuery.json",
17             // 2. 请求方法
18             type:"get",
19             // 请求参数
20             date:{
21             
22             },
23             // 请求成功执行的方法
24             success:function(mes){
25                 console.log(mes);
26             },
27             // 请求失败执行的方法
28             error:function(mes){
29                 console.log("失败！");
30             }
31         })
32     </script>
33 </body>
34 </html>