Ajax知识点

接口

接口又指API， 是指为两个不同的应用之间实现流畅通信，而设计的应用程序编程接口

HTTP

客户端发送一个HTTP请求到服务器的请求消息包括以下格式：请求行（request line）、请求头部（header）、空行和请求数据四个部分组成

HTTP响应也由四个部分组成，分别是：状态行、消息报头、空行和响应正文。

HTTP 请求方法

HTTP1.0 定义了三种请求方法： GET, POST 和 HEAD 方法。

HTTP1.1 新增了六种请求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT 方法。

序号	方法	描述
1	GET	请求指定的页面信息，并返回实体主体。
2	HEAD	类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头
3	POST	向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。
4	PUT	从客户端向服务器传送的数据取代指定的文档的内容。
5	DELETE	请求服务器删除指定的页面。
6	CONNECT	HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。
7	OPTIONS	允许客户端查看服务器的性能。
8	TRACE	回显服务器收到的请求，主要用于测试或诊断。
9	PATCH	是对 PUT 方法的补充，用来对已知资源进行局部更新 。

 

HTTP 状态码

下面是常见的 HTTP 状态码：

• 200 - 请求成功

• 301 - 资源（网页等）被永久转移到其它URL

• 404 - 请求的资源（网页等）不存在

• 500 - 内部服务器错误

 

Ajax

定义

Ajax异步JavaScript和XML，使用Ajax技术网页应用能够快速地将数据更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

同步和异步的区别

• 同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。

• 异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容

应用场景

Ajax主要应用于"局部刷新页面"和"异步提交"。

异步提交: 提交完认为不需要原地等待，立马就做其他事

局部刷新: 不在局限于整个页面的刷新，而是在于局部的某一个页面的小块刷新 因此和使用Form表单和后端进行数据交互的方式比较。

 格式

const xhr = new XMLHttpRequest()

            xhr.open(请求方式, 请求路径)
            
            xhr.onreadystatechange = function () {

                if (xhr.status == 200 && xhr.readyState == 4) {
                    const data = JSON.parse(xhr.responseText)
                }
            }
            xhr.send()

 

readState

readyState存放xhr的状态信息，从0-4发生变化：

• 0：请求未初始化

• 1：服务器已建立连接

• 2：请求已接收

• 3：请求处理中

• 4：请求已完成，且响应已完成

status响应的状态

status存放xhr的响应状态，状态码可由服务器自行返回。

POST请求

• 设置请求头，get一般不设置。

• post需要设置xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

• xhr.send(params)向服务器发送参数 

ajax优缺点

优点：

通过异步模式，提升了用户体验。

优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。

Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

Ajax可以实现动态不刷新（局部刷新）

缺点：

安全问题 AJAX暴露了与服务器交互的细节。

对搜索引擎的支持比较弱。

不容易调试。

跨域

同源策略 SOP是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

 跨域的解决方案

方案一：Django框架后端跨域

python 终端中输入 ：pip install django-cors-headers

方案二：通过Jsonp跨域

 

回调函数

function ajaxGet(method, url, callback) { // callback: 为一个回调函数
     // 创建ajax 对象
    let ajax = new XMLHttpRequest();
    // 建立与服务器连接 
    ajax.open(method, url);
    // 发送数据
    ajax.send();
    ajax.onreadystatechange = function() {
        // onreadystatechange: 数据改变事件 
        if(ajax.readyState === 4 && ajax.status === 200){
            callback(ajax.responseText)
        }
    }
}
function handelAdd() {
    ajaxGet(`url`, (res)=>{
        alert(JSON.parse(res).message)
        location.href = './index.html'
    })
}

Jquery

$.get()

$.post()

$.ajax()