「这是我参与2022首次更文挑战的第25天，活动详情查看：2022首次更文挑战」。

前言

大家好，我是程序猿小白 gw_Gw，很高兴能和大家一起学习进步。

以下内容部分来自于网络，如有侵权，请联系我删除，本文仅用于学习交流，不用作任何商业用途。

摘要

本文主要介绍Ajax的介绍和实现。

Ajax

1. Ajax简介

Ajax(Asynchronous JavaScript and XML)异步的JavaScript和XML

Ajax是一种可以使网页实现异步更新，从而达到在不重新加载网页的情况下，更新部分网页的效果。

同步和异步

举一个栗子大家来了解一下什么是同步和异步。

就像我们在用热水壶烧开水的时候，当我们打开开关后，等待热水烧开的期间，我们可以选择啥也不干就在热水壶旁边一直等到水烧开，也可以等到热水烧开我们再回来，这期间我们可以去做其他的事。

同步

一直等待热水烧开的行为就属于同步，同步方法一旦被调用就必须等到方法的返回结果才能进行下面的操作。

异步

而第二种在等待热水烧开的时候我们去做其他的事就属于异步操作，在调用异步方法后不需要等待结果就可以继续往下执行，通过回调函数来处理得到的执行结果。

2. Ajax实现

Ajax的实现有两种方式，一种是用过原生的JS代码进行实现，这种实现较为琐碎，了解即可。另一种是通过JQuery实现，相比之下较为简单，推荐使用。

2.1 原生JS实现

原生JS实现分为四步：

创建对象

let xmlHttp;
if(window.XMLHttpRequest){
    xmlHttp = new XMLHttpRequest();
}
else{
//兼容老版本的IE浏览器
    xmlHttp = new ActiveXObject("Microsoft,XMLHTTP"); 
}

建立连接
```
xmlHttp.open(method,url,async)
```
参数解释：

method：请求类型，GET或POST

url：请求地址，比如某个servlet

async：同步或异步，true表示同步，false表示异步
发送请求
```
xmlHttp.send(string)
```
当为POST请求时，使用参数，即POST的请求参数，GET请求参数可以直接拼接到Url上。

获取服务器响应

xmlHttp.onreadystatechange=function()
{
    //判断readyState就绪状态是否为4，status响应状态码是否为200
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        //获取服务器的响应
        let responseText = xmlhttp.responseText;
        //如果是XML格式的数据
        let responseXML = xmlHttp.responseXML;
        alert(responseText);
    }
}

2.2 JQuery实现

Jquery实现有三种方式，但注意要导入jquery插件。

$.ajax({key:value});

key可以有以下取值:

url 请求路径
type 请求方式，GET或POST
data 请求参数
success 响应成功后执行的函数
error 响应失败后执行的函数
dataType 响应得到的数据格式

【实例】

$.ajax({
    url:"Servlet" , 
    type:"POST" ,
    //data: "username=tom",
    data:{"username":"jack"},
    success:function () {
        alert("响应成功");
    },
    error:function () {
        alert("响应失败")
    },
    dataType:"json"
});

```
$.get(url,[data],[callback],[type]);
```
```
$.post(url,[data],[callback],[type]);
```
参数解释：
1. url 请求路径
2. data 请求参数
3. callback 回调函数
4. type 响应得到的数据格式

Ajax入门

前言

摘要