ajax的基本使用

1.什么是ajax?

ajax(异步 javaScript xml）能够刷新网页局部数据而不是刷新网页。

2.如何使用ajax?

第一步，创建xmlHttpRequest对象 var xmlHttpRequest = new XmlHttpRequest();

var xhttp;
        if (window.XMLHttpRequest) {
            //现代主流浏览器
            xhttp = new XMLHttpRequest();
        } else {
            // 针对浏览器，比如IE5或IE6
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

第二步,xmlHttpRequest对象的open()和send()方法发送给服务器

xhttp.open("get", "${pageContext.request.contextPath}/emps", true);
          
 xhttp.send();

open(）方法中的几个参数分别是open(method,url,async)

method 是ajax的请求类型 get或者post请求

url 是请求的url 统一资源标识符

async是是否同步或者异步 true 或者 false

send()方法发送出请求

第三步,使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应

1	`document.getElementById("demo").innerHTML = xhttp.responseXML;`

第四步,onreadystatechange是从 0 到4,0表示请求未被初始化 1表示服务器连接成功 2表示请求被服务器接收 3表示处理请求 4表示请求处理完成并且准备响应

readyState属性有多个状态码就是请求状态码 200表示请求完成

1	`xhttp.status ==` `200` `&& xhttp.onreadystatechange==4`

这是传统的js的ajax写法，现在在jquery中ajax的写法为这样的

在JQuery中的写法应该为这样的

$.ajax({
    type: "",
    url: "",
    data: $('#someForm').serizlize(),
    success: function ( data ) {}
    timeout: 15000,
    error: function ( data ) {}
})

　由于JQuery中队JavaScript进行了大量底层封装，所以这个封装的思路是

了解内部常见参数

type :是请求的方法常见的有get 和post请求

url:请求的路径

data:请求传递的数据这个地方使用了form表单数据序列化

success：请求成功调用什么方法

timeout设置超时时间

error:请求失败调用什么方法

这里是我自己写的ajax的jaquery版本使用

$.ajax({
            url : "${pageContext.request.contextPath}/emps",
            data : "pn=" + pn,
            type : "get",
            async : true,
            success : function(result) {
                console.log(result);
                //1.解析员工数据
                build_emps_tables(result);
                //2.解析并显示分页信息
                build_page_info(result);
 
                build_page_nav(result);
            }
        });