Ajax原生代码以及jQuery代码实现

异步对象XMLHttpRequest属性和方法

1.创建异步对象，使用js的语法
var xhr = new XMLHttpRequest();

2.XMLHttpRequest方法
① open(请求方式,服务器端的访问地址,异步还是同步)
例如: xhr.open("get","http://localhost:8080/toShow" ,true);
② send(): 使用异步对象发送请求

3.XMLHttpRequest属性
readyState属性:请求的状态 , 例如: xhr.readyState==4
0:表示创建异步对象时，new XMLHttpRequest();
1:表示初始异步对象的请求参数 , 执行open()方法
2:使用send()方法发送请求。
3:使用异步对象从服务器接收了数据
4:异步对象接收了数据，并在异步对象内部处理完成后。

status属性:网络的状态，和Http的状态码对应, 例如: xhr.status==200
200:请求成功
404:服务器资源没有找到
500:服务器内部代码有错误

responseText属性:表示服务器端返回的数据 , 例如: var data = xhr.responseText;

Ajax完整原生代码案例

    <script type="text/javascript">
        function search() {
            //1.创建异步对象
            var xhr = new XMLHttpRequest();
            //2.绑定事件
            xhr.onreadystatechange=function () {
                if (xhr.readyState==4 && xhr.status==200){
                    //获取数据
                    let data = xhr.responseText;
                    //更新id为son的dom
                    document.getElementById("son").value= data;
                }
            }

            //3.初始化参数,获取id为parent的值
            var pid= document.getElementById("parent").value;
            xhr.open("get","http://localhost:8080/getParentById/"+pid,true)
        
            //4.发起请求
            xhr.send();
        }
    </script>

使用jQuery提供的函数实现Ajax请求的处理。代替直接使用XMLHttpRequest, 但是jquery实际还是使用的异步对象。

$.ajax({
        url: "getParentByIdServlet",
        type:"get",
        data:{"name":"李四","age":20},
        dataType:"json",
        success: function(resp) {       
          //开发人员获取数据，更新dom对象
        },
        error:function(){ 
            alert ("请求错误")
         }
})

$.ajax() 核心的函数详解

语法: $.ajax( { json格式的参数} )
json格式的参数: key是定义好的，需要开发 人员给key赋值。这些key是 用来表示ajax请求必须的参数

例如
请求的url地址，是不是异步请求， 请求的方式等等。
url:服务器的地址，例如某个servlet的访问地址。queryProvinceServlet
type:表示请求的方式，get, post。 默认是get。 这个值不用区分大小写
data:表示提交的请求参数。可以是string， 数组， json类型的。 推荐使用json格式。
例如: data: {"name":"李四","age":20}
jquery在发送请求时，会把json中的key作为请求的参数使用，key对应的值作为参数数据。

dataType:数据格式，可以是 html, text， xml, json 等等。表示发起请求后，希望服务器端返回的数据格式。jquery可以尝试使用对应格式处理返回的数据。 比如你指定 了dataType:json,表示希望服务器返回的是json格式数据。然后jquery把json数据转为json对象。 服务器代码可以获取到dataType的内容。
     例如:请求中dataType:"json", jquery发起请求后,
     在请求头中Accept: application/json, text/javascript; 
     
success:函数function。当服务器端返回了数据，jquery处理完数据后，执行这个函数。等同于异步对象的readyState==4 $$ status= 200的情况
     例如: success:function( resp ){开发人员处理服务器返回的数据}
      resp是自定义形参，相当于 resp= xhr.responseText
      
error:function(),当请求错误时，执行这个函数。

contentType:表示请求的参数数据格式。例如application/json ,这个内容可以不写。

async:是一个boolean表示请求是同步的还是异步的。true是异步的， 默认是true; false同步的。

jQuery还提供更简单的Ajax写法

$.get()

$.get()这个函数就是执行get请求方式的ajax
语法: $.get(url, 请求参数，success函数， dataType)
例如:
$. get("queryName" , {"proid" :1},function(resp){ //获取、接收数据 }，"json")

$.post()