原生ajax学习资料

一 原生ajax

1 相关概念

1 ajax：Asynchronous JavaScript And Xml，异步的页面局部刷新技术，他不是新技术，是当前js+css+document的技术整合，是web2.0提出的核心概念

2 web技术代：

web1.0：官网发布为主，用户通过网络访问信息，交互少，网络带宽通常100kb左右，时间在上世纪90年代

web2.0：一中心服务器为主，用户可以参与到信息的发布，分享等，有更好的用户体验，交互多，宽带通常在1m

左右，在21世纪前10年

web3.0：去中心化，用户自身作为服务资源的提供者和分享者，以区块链为技术核心，网络带宽至少10m以上，对个人数据的安全性有更高要求，15年往后

3 同步和异步：

同步：用户提交请求后，在服务器相应之前，一直处在等待状态，必须响应后才能继续后续操作

异步：用户在提交一次请求后，可以直接继续后续功能，在其他操作过程中的某个节点响应数据

2 ajax工作流程

本质还是请求和响应

1 先通过js获取ajax引擎对象【XMLHttpRequest】

2 在该对象的open方法中传递请求地址和请求信息

3 send方法调用发送信息

4 在服务器端响应后，通过css+dom进行页面局部代码显示

3 XMLHttpRequest对象

1 常用方法：open send

2 常用事件：onreadystatechange

3 常用属性：readyState status responseText

4 核心代码实现【查重】

1 相关功能的js非空操作

function checkName(){
    var txtName = document.getElementById("txtName").value;
    document.getElementById("msgName").innerHTML = "";
    if(txtName == ""){
        document.getElementById("msgName").innerHTML = "姓名不能为空！";
        return;
    }
    //调用执行ajax的方法
    doAjax(txtName);
}

2 doAjax函数

//定义ajax引擎对象：XMLHttpRequest
var xhr;
//ajax操作方法
function doAjax(name){
    //1 创建实例
    if(window.XMLHttpRequest){
        //浏览器是IE7及以上，其他的浏览器、火狐等
        xhr = new XMLHttpRequest();
    }else{
        //老版本浏览器IE7以下
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2 判断
    if(xhr == null){
        alert("ajax对象创建失败！");
    }else{
        //open方法
        xhr.open("get", "AjaxServlet?name=" + name, true);
        //send方法
        xhr.send(null);
        //调用事件，绑定回调函数
        xhr.onreadystatechange = doBack;
    }
}

3 post提交的区别【参数放置在send方法中，需要设置setRequestHeader方法】

//open方法
xhr.open("post", "AjaxServlet", true);
//如果使用post提交，设置头部信息
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//send方法
xhr.send("name="+name);

4 回调函数

//回调函数
function doBack(){
    if(xhr.readyState == 4 && xhr.status == 200){
        //获取响应信息
        var result = xhr.responseText;
        //对result进行处理
        ......
    }
}

5 后端Servlet的代码编写...