ajax提交返回html页面,WEB前端——JS实现ajax异步提交,及返回处理（含js动态生成网页元素《实例》）...

JS实现ajax异步提交

对于文件的上传建议使用iframe来模拟ajax的异步提交，还有参数较多不想拼接的时候。当然可以使用Jquery提供的方法来进行处理。

var XMLHttpReq; //创建XMLHttpRequest对象

//发送请求函数

function ajaxDiffMovie(obj) {

//对点击事件的js响应，如选中状态，提示刷新等进行设置。

createXMLHttpRequest(); //调用下面函数创建一个XMLHttpRequest对象(全局变量)

var url = "/graduation_project/ajax/Index?kind="+obj.innerText; //设置需要请求的URL

XMLHttpReq.open("GET", url, true); //发送请求

XMLHttpReq.onreadystatechange = processResponse;//指定响应函数

XMLHttpReq.send(null); // 发送请求，只有POST方法是send()方法的参数才有意义

}

//创建一个XMLHttpRequest对象保存在全局变量XMLHttpReq中

function createXMLHttpRequest() {

if(window.XMLHttpRequest) { //Mozilla 浏览器

XMLHttpReq = new XMLHttpRequest();

}

else if (window.ActiveXObject) { // IE浏览器

try {

XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {}

}

}

}

// 处理返回信息函数

function processResponse() {

if (XMLHttpReq.readyState == 4) { // 判断对象状态

if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息

DisplayHot(); //处理返回信息

//在返回信息处理完成后执行一些操作，比如更改刷新状态

setTimeout("sendRequest()", 1000);

} else { //页面不正常

window.alert("您所请求的页面有异常。");

}

}

}

//将内容显示到页面待处理(这里用js生成内容)

function DisplayHot() {

var resx=XMLHttpReq.responseXML; //获取返回的XML的根节点，然后继续进行处理...

//XMLHttpReq.responseText; //获取返回的一个字符串...然后进行后续操作

}

对于post方法将个参数拼接后作为send的参数

var data = "name=" + document.getElementById("staffName").value

+ "&sex=" + document.getElementById("staffSex").value

+ "&job=" + document.getElementById("staffJob").value;

XMLHttpReq.send(data);

js对返回的XML或字符串进行处理

resx.getElementsByTagName("oneMovie")[0]; //通过标签获取第一个标签为oneMovie的XML结点

node.children[0].firstChild.nodeValue; //获取node的第一个孩子内的文本信息

node.length //获得结点的个数

js生成HTML结点

document.createElement("li"); //创建一个DOM结点

node.setAttribute("id","hotmovie"+i); //设置属性id node.setAttribute("data-title",name); //设置属性data-title(自定义属性)

node.className="ui-slide-item" ; //设置class属性

node.innerHTML=name; //设置结点内的HTML信息

node.οnmοuseοver= function remoover() {//添加事件！

mouseover(this);//这里设置的id为什么是固定的

};

fatherNode.appendChild(node); //将node结点添加到fatherNode下