欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

原生Ajax实现异步数据传输

程序员文章站 2022-07-12 19:27:56
...

描述:不用前端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" onclick="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");