第四章，使用jQuery处理Ajax

文章目录

- - - 第四章，使用jQuery处理Ajax

第四章，使用jQuery处理Ajax

一，HTTP协议

HTTP协议概念
- 超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议
- 设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法
- 一次HTTP操作称为一个事务，其工作过程可分为四步

HTTP协议请求方法

方法	说明
OPTIONS	返回服务器针对特定资源所支持的HTTP请求方法
HEAD	向服务器索要与GET请求相一致的响应，只不过响应体将不会被返回
GET	向特定的资源发出请求
POST	向指定资源提交数据进行处理请求
PUT	向指定资源位置上传其最新内容
DELETE	请求服务器删除Request-URI所标识的资源
TRACE	回显服务器收到的请求，主要用于测试或诊断
CONNECT	HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器
PATCH	实体中包含一个表，表中说明与该URI所表示的原内容的区别

POST和GET的区别

	GET	POST
缓存	能被缓存	不能缓存
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码
历史	参数保留在浏览器历史中	参数不会保存在浏览器历史中
对数据长度的限制	当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）	无限制
对数据类型的限制	只允许 ASCII 字符	没有限制，也允许二进制数据
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中
可见性	数据在 URL 中对所有人都是可见的	数据不会显示在 URL 中

二，JQuery中处理ajax的方法

ajax（）方法：jQuery中最为底层的Ajax方法

参数
- url-异步请求的地址
- settings - 设置异步请求的参数
settings选项 - 对象类型
- type - 设置请求方式
- data - 发送给服务器端的请求数据
- dataType - 服务器端响应结果的格式
- success - 异步请求成功后的回调函数
- function(data,textStatus,jqXHR){}
  - data - 表示服务器端响应的结果
  - textStatus - 表示服务器端当前的状态
  - jqXHR - Ajax中的核心对象

js 复制代码

//$.ajax(url,[settings]）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ajax方法</title>
</head>
<body>
    <button>按钮</button>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $('button').click(function(){
            $.ajax('data/server1.json',{
                type:'get',
                success:function(data){
                    console.log(data)
                }
            })
        })
    </script>
</body>
</html>

load（）方法：请求方式由是否传递参数决定。即传递参数，为GET方式;不传递参数，为POST方式。
- 参数
  - url - 异步请求的地址
  - data - 异步请求的数据
    - 如果省略请求数据的话，当前的请求方式为GET
    - 如果发送请求数据的话，当前的请求方式为POST
  - callback - 异步请求成功后的回调函数
- 返回值 - 服务器响应的结果
- 注意 - 自动将返回结果写入到目标元素中
js 复制代码
```
//load(url,data,callback）方法
<body>
    <button>按钮</button>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $('button').click(function(){
            $('button').load('data/server1.json',function(){
                console.log('异步请求成功')
            })
        })
    </script>
</body>
```

get（）方法与post方法

$.get()方法使用get方式向服务器端发送异步请求
$.post()方法使用POST方式向服务器端发送异步请求
参数
- url - 异步请求的地址
- data - 异步请求的数据
- callback - 异步请求成功后的回调函数
- type - 设置服务器满响应结果的格式
  - 值为xml、html、script、json、text和default
返回值 - 服务器响应的结果
注意 - 自动将返回结果写入到目标元素中

js 复制代码

//$.get(url,data,callback,type）方法 -- 请求方式为GET
//$.post(url,data,callback,type）方法
<button>按钮</button>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $('button').click(function(){
            $.get('data/server1.json',{name:'张无忌'},function(response){
                console.log(response)
            },'json')
            $.post('data/server1.json',{name:'张无忌'},function(response){
                console.log(response)
            },'json')
        })
    </script>

三，跨域

跨域请求是指在一个域名下的网页请求另一个域名下的资源。由于浏览器的同源策略限制，直接进行跨域请求是不被允许的。但是我们可以利用一些技巧和工具来实现跨域请求
同域名，同端口，同协议

JSONP

JSONP是一种绕过同源策略的方法，它利用了<script>标签可以跨域加载资源的特性。JSONP通过动态创建<script>标签，将请求发送到目标服务器，并指定一个回调函数作为参数。目标服务器返回的响应会作为回调函数的参数传递回来，从而完成跨域请求

js 复制代码

function handleResponse(data) {
  console.log(data);
}

var script = document.createElement('script');
script.src = 'http://example.com/api?callback=handleResponse';
document.body.appendChild(script);
//在上面的例子中，我们定义了一个名为handleResponse的函数来处理服务器返回的响应数据，然后创建一个<script>标签，并将目标服务器的地址和回调函数作为参数传递进去。当浏览器加载这个<script>标签时，会向目标服务器发送请求，并执行回调函数。
//JSONP的缺点是只支持GET请求，且只支持返回JSON格式的数据

CORS

CORS（Cross-Origin Resource Sharing）是一种标准的跨域解决方案。它通过在HTTP响应头中添加Access-Control-Allow-Origin字段来授权其他域名下的资源可以被访问。
要在服务器端启用CORS支持，需要在响应头中添加Access-Control-Allow-Origin字段，并设置允许访问的域名。以下是一个使用CORS进行跨域请求的示例代码：

js 复制代码

$.ajax({
  url: 'http://example.com/api',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, error) {
    console.log('An error occurred.');
  }
});
//在上面的例子中，我们使用$.ajax()方法发送一个GET请求到目标服务器，并指定了返回数据的类型为JSON。如果服务器返回了数据，就会调用success回调函数。
//要在服务器端启用CORS支持，可以在响应头中添加如下代码：
Access-Control-Allow-Origin: http://example.com
//这样，只有http://example.com这个域名下的网页才能够访问服务器上的资源。

iframe
- 基于iframe实现跨域
- 在两个页面中同时添加document.domain
- 应用场景
  - 只有主域名相同的情况下方可使用此方法
    - baidu.com , a.baidu.com , b.a.baidu.com
    - 三个不同的域名，但是主域名是相同的
WebSocket
- WebSocket是一种基于TCP协议的全双工通信协议，它可以在浏览器和服务器之间建立持久性的连接，实现实时通信。
- 由于WebSocket使用HTTP协议进行握手，因此在进行跨域请求时，仍然受到同源策略的限制。但是与AJAX不同的是，浏览器会将发起WebSocket连接的请求分为两步：第一步是建立连接的握手阶段，称为"upgrade"，第二部是真正的数据通信阶段。
- 在握手阶段，浏览器会发送一个HTTP请求到目标服务器，并在请求头中添加Sec-WebSocket-Origin和Sec-WebSocket-Key字段用于验证。服务器在收到请求后，可以验证这两个字段，并在响应头中加入Sec-WebSocket-Accept字段作为验证的回应。
js 复制代码
```
var socket = new WebSocket('ws://example.com/socket');

socket.onopen = function() {
  console.log('Connection opened.');
};

socket.onmessage = function(event) {
  console.log('Message received:', event.data);
};

socket.onclose = function() {
  console.log('Connection closed.');
};

socket.onerror = function(error) {
  console.log('An error occurred:', error);
};
//在上面的例子中，我们使用new WebSocket()方法创建了一个WebSocket对象，并指定了目标服务器的地址。然后，我们可以监听onopen,onmessage,onclose和onerror事件来处理连接的打开、接收到消息、连接的关闭和错误的情况。
```