前后端交互工具---ajax

最新推荐文章于 2023-01-03 17:00:45 发布

mini_055

最新推荐文章于 2023-01-03 17:00:45 发布

阅读量392

点赞数

文章标签： javascript 前端 ajax

本文链接：https://blog.csdn.net/m0_61480985/article/details/128444893

版权

1.什么是ajax?

ajax (全名：Asynchronous Javascript And XML)其实就是异步的javaScript和XML。

XML：<html>这是html标签，XML格式是一样的可以自定义<name> <age> 满足标记语言的格式就可以了。

ajax是一门新语言，是综合HTTP异步通信、JS、XML、以及JSON等多种网络技术的一种编程模型。

AJAX ~= JS+ xml+JSON + HTTP通信，本质就是在HTTP协议的基础上以异步的方式与服务器进行通信。

2.同步和异步的区别

在了解ajax前首先先了解下同步和异步的区别。

同步请求（false）：

同步的思想是：所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。

异步请求（true）：

将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。

使用异步的场景：网络请求,本地内容读取，I/O读取、数据库操作 ---耗时操作

使用同步的场景：主线程

常见异步代码：setInterval setTimeout 所有的事件 ,ajax请求。

3.ajax优缺点

优点：

1.ajax最大的优点就是页面无需刷新便可向服务器传输或读写数据。（在读取数据的过程中，用户所面对的不是白屏，而是原来页面的转台，或者正在更新的信息提示状态，只有当接收到全部数据后才更新相应部分的内容，而这种更新也是瞬间的用户几乎感觉不到。）

2.使用异步的方式与服务器通信，不需要中断操作；

3.可以把服务端的工作转嫁给客户端，最大程度减少冗余请求；

4.基于标准化的并被广泛支持的技术，ajax不需要下载插件或者小程序；

缺点：

1.对搜索引擎的支持比较弱；（搜索引擎的支持度不够，数据都不在页面上，搜索引擎搜索不到）

2.安全问题，ajax暴露了与服务端交互的细节；（对IT企业带来了新的威胁，ajax就如同对企业数据建立了一个直接通道，这使开发者在不经意间暴露比以前更多的数据和服务器逻辑）。

3.ajax不支持浏览器返回按钮（ajax干掉了back和history功能，即对浏览器机制的破坏）。

4.ajax请求处理格式：

4.1 四个步骤：

1.通过XMLHttpRequest类创建xhr对象；

2.为xhr对象添加属性与回调方法；

3.令xhr对象执行open()方法，指明请求被发往某处；

4.令xhr对象执行send()方法，发出请求。

代码实现：

利用ajax发送GET请求。

//1.创建对象
var xhr;
if (window.XMLHttpRequest){//普通浏览器    
	xhr=new XMLHttpRequest();
}else{//老版本IE
	xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

// 2.监听网络变化
xhr.onreadystatechange = function(){
   console.log(xhr.readyState)//状态码
   console.log(xhr.status)//响应码
   if(xhr.readyState == 4){
        if(xhr.status == 200){
        console.log(xhr.responseText)
    }else{
            console.log(xhr)
      }
  }

// 3.打开一个请求地址
// xhr.open(请求方式,请求地址,是否异步)  请求地址如果和当前页面在同一服务器中可写成相对地址
xhr.open("GET","http://localhost:8888/demo/02.php",true)

//4.发送请求
xhr.send();

如果是发送POST请求，在调用send方法之前先设置请求头；本质上是一个对象，存储请求数据的信息。

//3 打开一个请求地址
xhr.open("POST","./04.php",true)
//3.5 设置请求头（POST请求时设置）
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

4.2 GET和POST请求方式的区别

1. get的数据在URL是可见的，POST请求不显示在URL中；

2. get对长度是有限制的，POST长度是无限的；

3. get请求后，按后退按钮，刷新按钮无影响；POST数据会被重新提交；

4. get请求的数据可以收藏为书签，POST请求到的数据不可收藏为书签；

5. GET历史参数会被保留在浏览器里，POST不会保存在浏览器中的；

6. get与POST相比，GET安全性较差，因为所发的数据是URL的一部分；

7.GET编码类型只有一种（application/x-www-form-urlencoded），POST的编码类型有很多种（application/x-www-form-urlencoded，multiport/form-data..）；

这里要说一下状态码和响应码。

4.3 AJAX状态码

ajax状态码 ---- xhr.readyState：用来表示一个ajax请求的全部过程中的某一个状态。

0	没有建立连接
1	请求还没有发送，但是连接已建立
2	发送请求，将header和后端状态码收到
3	接收响应数据中
4	得到了服务器完整响应的数据

4.4 AJAX响应码

ajax响应码 ---- xhr.status：

1xx	消息状态码，表示请求已被接收，需要继续处理 101：切换协议
2xx	请求成功，请求已成功被服务器接收、理解并接受 200：成功
3xx	重定向，需要后续操作才能完成这一请求 304：未修改
4xx	请求错误，请求含有词法错误或无法被执行 404：未发现指定网址
5xx	服务器错误，服务器在处理某个正确请求时发生错误 500：服务器发生错误

只有当状态码为4（xhr.readyState == 4）且响应码为2xx（xhr.status == 200）的时候代表ajax请求成功，本次请求正常完成。

5. 使用原生js封装一个ajax

(function(){
    function myAjax(paramsObj){
        // 判断参数类型
        if(!(paramsObj instanceof Object)){
            throw new TypeError("参数必须是一个对象！")
        }
        // 处理参数
        if(paramsObj.type.toUpperCase() == "POST"){
            var formData = new FormData()
            for(var pro in paramsObj.data){
                formData.append(pro,paramsObj.data[pro])
            }
        }else if(paramsObj.type.toUpperCase() == "GET"){
            var arr = []
            for(var pro in paramsObj.data){
                var str = pro + '=' + paramsObj.data[pro] 
                arr.push(str)
            }
            var canshuStr = arr.join("&")
            // 拼接到url后面
            paramsObj.url += paramsObj.url.indexOf("?") == -1 ? "?" + canshuStr : '&' + canshuStr;    }else{
            throw new TypeError("请求的数据类型错误")
        }
    
        var xhr = null;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject("Micsrosoft.XMLHTTP")
        }
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    // console.log(xhr.responseText);
                    paramsObj.success(xhr.responseText);
                }else{
                    paramsObj.error(xhr)
                }
            }
        }
        xhr.open(paramsObj.type,paramsObj.url,true)
        if(paramsObj.type.toUpperCase() == "POST"){
            xhr.send(formData)
        }else if(paramsObj.type.toUpperCase() == "GET"){
            xhr.send()
        }else{
            throw new TypeError("请求的数据类型错误")
        }
    }
    window.myAjax = myAjax;
})()