原生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");
上一篇: 文件读写操作