什么是AJAX请求

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

简单来说AJAX是一种浏览器通过js异步发起请求，局部更新页面的技术。

原生AJAX代码

AJAX原生代码（底层原理）：

<script>
       //js中问题的解决方案:console.log(),debugger,排除法
       function doAjaxStart(){
          debugger //js中断点
          // console.log("==doAjaxStart()==")
          //初始化span标记内部内容(可选)
          let span=document.getElementById("result");
          span.innerHTML="Data is loading....."
         //创建XHR对象
          let xhr=new XMLHttpRequest();
         //设置状态监听
          xhr.onreadystatechange=function(){
              //readyState==4表示服务端响应到客户端的数据已经接收完成
              //status==200 表示服务端处理过程OK的,500表示异常
              if(xhr.readyState==4&&xhr.status==200){
                  span.innerHTML=xhr.responseText;
              }
          }
           const url="http://localhost/doAjaxStart";
          //建立连接
           xhr.open("GET",url,true);//true 表示异步
          //发送请求
           xhr.send(null);
           //console.log("==main==")
       }
</script>

AJAX请求的特点

• 局部更新：更新HTML元素时不需要刷新界面
• 异步请求：不会影响其他的操作

jQuery中的AJAX请求

$.ajax方法

参数组合如下：

• url：表示请求的地址

• type：表示请求的类型GET或POST请求

• data：表示发送给服务器的数据，格式有两种

  1. name=value&name=value

  2. {key:value}

• success：请求成功，响应的回调函数

• dataType：响应的数据类型，常用的数据类型有：

  1. text：表示纯文本
  2. xml：表示xml数据
  3. json：表示json对象，会自动转换成json对象

示例代码：

$.ajax({
    url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
    data:"action=JqueryAjax",
    type:"GET",
    success:function(data) {//这边方法里面一定要带一个参数，这是请求响应中返回的数据
        alert("成功调用")
    },
    dataType:"text"
})

$.get和$.post方法

参数如下：

• url：请求的url地址
• data：发送的数据
• callback：成功的回调函数
• type：返回的数据类型

示例代码：

// $.get
$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=JqueryGet",function(data) {
    $("#msg").html("get 编号：" + data.id + "， 姓名：" + data.name)
}, "json")

// $.post
$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=JqueryPost",function(data) {
    $("#msg").html("post 编号：" + data.id + "， 姓名：" + data.name)
}, "json")

$.getJSON方法

固定返回json数据

参数如下：

• url：请求的url地址
• data：发送的数据
• callback：成功的回调函数

示例代码：

$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=JqueryGetJSON",function(data) {
    $("#msg").html("getJSON 编号：" + data.id + "， 姓名：" + data.name)
})

$.serialize方法

将表单中的信息拼接成字符串返回

代码示例：

//括号中的为表单DOM元素
$("#form01").serialize();

返回结果示例为：name=xxxx&password=xxxxxx

这个方法的主要作用是方便拼接到其他AJAX方法data参数那一块，节约时间