原生Ajax实现异步数据传输

描述：不用前端js框架（如jQuery、Dojo、ext、proptype等）的原生Ajax，异步实现与后台的数据传输，不依赖任何js包

- 五个步骤

注：所有js代码均位于某一个js文件中，调用函数只需要引入该文件
- 1.建立XMLHttpRequest对象

//全局变量，记录建立的XMLHttpRequest对象
var xmlhttp;
//AjaxDemo
function ajaxDemo() {
    //通过页面内置dom对象来获取对应位置的输入数据
    var input = document.getElementById("inputId").value;
    //针对FireFox，Mozillar，Opera，Safari，IE7，IE8
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
        //针对某些特定版本的mozillar浏览器的BUG进行修正
        if (xmlhttp.overrideMimeType) {
            xmlhttp.overrideMimeType("text/xml");
        }
    } else if (window.ActiveXObject) { //针对IE6，IE5.5，IE5
        //两个可以用于创建XMLHTTPRequest对象的控件名称
        var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for (var i = 0; i < activexName.length; i++) {
            try{
                //取一个控件名创建，创建成功终止循环
                xmlhttp = new ActiveXObject(activexName[i]);
                break;
            } catch(e){
            //如果创建失败，回抛出异常然后可以继续循环继续尝试创建
            }
        }
    }
    //确认XMLHTtpRequest对象创建成功
    if (!xmlhttp) {
        alert("XMLHttpRequest对象创建失败!!");
        return;
    } else {
        alert(xmlhttp.readyState);
    }

获取input标签中的数据，使用页面内置dom对象来获取对应位置（id为“input”）的标签的输入数据，前端代码示例

<input type="text" id="inputId"/>
<input type="button" value="OK" οnclick="ajaxDemo()"/

2.设置回调函数
注：此行代码接上面XMLHTtpRequest对象创建
callback是函数名，该函数将会在步骤5给出定义
函数名后不能加括号，否则就是函数调用

 xmlhttp.onreadystatechange = callback;

3.使用Open方法与服务器建立链接
此行代码接上面设置回调函数
参数1: http的请求方式，支持所有http的请求方式，一般用get或post
参数2: 请求的url地址，get方式请求的参数也在url中
参数3: 采用的交互方式，true表异步

 xmlhttp.open("GET","AJAXServer?input="+ input,true);

4.使用send方法向服务器端发送数据
这里只有一个参数，通过get方法从url传输，所以send函数参数设为null

 xmlhttp.send(null);

如果使用post方式请求数据，则send函数调用如下

 xmlhttp.setRequestHeader("Context-Type","application/x-www-form-urlencoded");
 //post请求方式需要自己设置http请求头RequestHeader
 xmlhttp.send("input="+input);

5.在回调函数中针对不同响应状态进行处理

function callback() {
    //判断对象的状态是交互完成
    if (xmlhttp.readyState == 4) {
        //判断http的交互是否成功
        if (xmlhttp.status == 200) {
            //获取服务漆器端返回的纯文本数据
            var text = xmlhttp.responseText;
            //将数据打印到页面上
            //通过dom的方式找到div标签所对应的元素节点
            var node = document.getElementById("result");
            //设置元素节点中的html内容
            node.innerHTML = text;
        } else {
            //出错了
        }
    }else{
       //XMLHttpRequest对象与后台的交互未完成
    }
}

后台Servlet获取数据代码

    //通过url或者send中给定的数据名来获取指定数据
    String input = request.getParameter("input");

来源：CSDN

作者：blackEyes_hyc

链接：https://blog.csdn.net/github_38220216/article/details/77099294

标签

ajax

数据传输方式

xmlhttp