Ajax的原生JS实现方式(XMLHttpRequest)和JQuery实现方式($.ajax())

布满荆棘的人生 2023-07-13 03:28 21阅读 0赞

**AJAX**：**A**Synchronous **J**avascript **A**nd **X**ML  
**异步的Javascript和XML**

AJAX是一种用于创建快速动态网页的技术  
是一种在**无需重新加载整个网页的情况下 更新部分网页**的技术

通过在后台与服务器**进行少量数据交换** 可以使网页进行**异步更新**  
也就是可以在不重新加载整个网页的情况下 对网页的某部分进行更新  
可以提升用户的体验

### 同步和异步的区别： ###

**同步**：在客户端发送请求给服务器端的期间 客户端**必须等待服务器端的响应** 在**等待的期间客户端不能做其他操作**  
例如按钮无法点击 输入框无法输入

**异步**：在客户端发送请求给服务器端的期间 客户端**不需要等待服务器端的响应** 在**服务器处理请求的过程中 客户端可以进行其他操作**

--------------------

# 一、原生JS实现方式 #

在实际开发中该方式并不常用 因为较为麻烦

### 1、创建对象 ###

var xmlhttp;
    if (window.XMLHttpRequest)
    {
        // 兼容IE7+ 和 Firefox 和 Chrome 和 Opera 和 Safari
    	xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // 兼容IE6或IE5
    	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

### 2、建立连接 ###

语法：`xmlhttp.open(请求方式,请求URL路径,true异步请求false同步请求);`  
例：

xmlhttp.open("GET","test1.txt",true);

若为**GET**方式 则请求参数在URL后拼接 下方的send()方法为空参  
若为**POST**方式 则请求参数在下方的send()方法中填写 URL后无需拼接

### 3、发送请求 ###

语法：`xmlhttp.send(字符串键值对);`  
例：

xmlhttp.send("username=Piconjo");

### 4、接收并处理来自服务器的响应结果 ###

获取方式：`xmlhttp.responseText`  
返回的是字符串

当服务器响应成功时获取  
当xmlhttp对象的readystatechange就绪状态改变时即触发事件

xmlhttp.onreadystatechange=function()
    {
        
    	if (xmlhttp.readyState==4 && xmlhttp.status==200)
    	{
        
    	 	document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    	}
    }

**readyState：**  
**0**: 请求未初始化  
**1**: 服务器连接已建立  
**2**: 请求已接收  
**3**: 请求处理中  
**4:** 请求已完成 且响应已就绪

**status：**  
**200**: “OK”  
**404**: 未找到页面

--------------------

# 二、JQuery实现方式 #

### 1、$.ajax() 发送AJAX请求 ###

语法：`$.ajax({键值对})`  
例：

function submit() {
        
        $.ajax({
        
            url:"ajaxServlet", //请求路径
            type:"POST", //请求方式
            // data:"username=Piconjo&password=123456",//请求参数
            data:{
        
                "username":"Piconjo",
                "password":"123456"//请求参数
            },
            success:function (data)//请求响应成功后的回调函数
            {
        
                alert(data);
            },
            error:function ()//请求响应出错后的回调函数
            {
        
                alert("出错了");
            },
            dataType:"json"//服务器预期返回的数据类型
        })
    }

#### 键值对参数： ####

**请求路径(url)：**`url:"ajaxServlet"`

**请求方式(type) ：**`type:"POST"`

**请求参数(data)：**`data:"username=Piconjo&password=123456"`  
或：

data:{
        
    "username":"Piconjo",
    "password":"123456"
    }

**请求响应成功之后的回调函数(success) ：**

success:function (data)
    {
        
    	alert(data);
    }

**请求响应出错之后的回调函数(error) ：**

error:function ()//请求响应出错后的回调函数
    {
        
    	alert("出错了");
    }

**服务器预期返回的数据类型(dataType)：**`dataType:"json"`  
参数值：  
“xml”: 返回XML文档 可用 jQuery 处理  
“html”: 返回纯文本HTML信息 包含的script标签会在插入dom时执行  
“script”: 返回纯文本JavaScript代码  
“text”: 返回纯文本字符串  
“json”: 返回JSON数据  
“jsonp”: 返回JSONP格式数据  
注：使用JSONP形式调用函数时 如"myurl?callback=?"  
jQuery将自动替换?为正确的函数名以执行回调函数

### 2、$.get() 发送GET请求 ###

发送GET请求  
语法：`$.get(url, [data], [callback], [type])`  
url：请求路径  
data：请求参数  
callback：回调函数  
type：响应结果的类型

例：

$.get("ajaxServlet",{
        username:"Piconjo",password:"123456"},function (data) {
        
    												                alert(data);
    												            },"json")

### 3、$.post() 发送POST请求 ###

发送POST请求  
语法：`$.post(url, [data], [callback], [type])`  
url：请求路径  
data：请求参数  
callback：回调函数  
type：响应结果的类型

例：

$.post("ajaxServlet",{
        username:"Piconjo",password:"123456"},function (data) {
        
    												                alert(data);
    												            },"json")

--------------------