首页导航博客电子书算法众创代码随贴关于我们

原生的javascript js简单的ajax提交处理

代码正文双击正文可选择全部

1[代码][javascript]

//建立一个XmlHttpRequestObject对象实例 je_xmlHttp.process();
		var je_xmlHttp = createXmlHttpRequestObject();

//建立XmlHttpRequestObject对象
		function createXmlHttpRequestObject(){

//用于存储XmlHttpRequest对象的引用
			var je_xmlHttp;
			//创建除了ie6 或者其更早版本外的所有浏览器
			//（用try catch结构是我见过最好的最具兼容性的创建XMLHttpRequest对象实例的方法）
			try	{
				je_xmlHttp = new XMLHttpRequest();
			}catch(e){
				//假设是ie6 或其更早版本
				var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
				"MSXML2.XMLHTTP.5.0",
				"MSXML2.XMLHTTP.4.0",
				"MSXML2.XMLHTTP.3.0",
				"MSXML2.XMLHTTP",
				"Microsoft.XMLHTTP");
				//顺序尝试创建每一个对象，直到成功为止
				for (var i=0; i<XmlHttpVersions.length && !je_xmlHttp; i++)	{
					try { 
						//尝试创建XMLHttpRequest对象
						je_xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
					}catch (e) {}
				}
			}

//返回已经创建的对象，或显示错误信息
			//实际应用中这里最好不要把错误信息发送到客户端
			if (!je_xmlHttp)
				alert("Error creating the XMLHttpRequest object.");
			else return je_xmlHttp;
		}

// 创建process()函数，读取服务器上的回显文本
		function process(){
			// 当 je_xmlHttp不为空时继续
			if (je_xmlHttp){
				//尝试连接服务器
				try	{
					//开始读取服务器上的async.txt文件,也可以是http://www.a.com/index.php?app=ajax&act=response
					je_xmlHttp.open("POST", "index.php", true);//在这里只是设置，发送。设置get方法提交的request参数,像是在地址栏中输入http://async.txt，调用方法用异步(或者解释成设置异步读取的文件async.txt）
					je_xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf8")
					je_xmlHttp.onreadystatechange = handleRequestStateChange; //设置XMLHttpRequest处理状态变化的函数。
					je_xmlHttp.send("act=chk_url&aaa=中华人民共国");
				}
				//如果出现异常，显示错误信息
				catch (e){
					alert("Can't connect to server:\n" + e.toString());
				}

}
		}

//处理http响应的函数
		function handleRequestStateChange()	{
			//获取页面上<div>元素的id
			myDiv = document.getElementById("chkmsg");
			//依次显示请求状态信息
			if (je_xmlHttp.readyState == 1){
				myDiv.innerHTML = ".";
			}else if(je_xmlHttp.readyState == 2){
				myDiv.innerHTML += ".";
			}else if (je_xmlHttp.readyState == 3){
				myDiv.innerHTML += ".";
			}
			//当转换到状态4时，读取服务器的响应
			else if (je_xmlHttp.readyState == 4){
				//       je_xmlHttp.status为200时表示处理成功
				if (je_xmlHttp.status == 200) {
					try	{
						//读取服务器信息
						response = je_xmlHttp.responseText;
						//显示信息到指定id
						//myDiv.innerHTML +="Request status: 4 (complete). Server said: <br/>";
						myDiv.innerHTML = response;
					}catch(e){
						alert("Error reading the response: " + e.toString());
					}
				}else{
					alert("There was a problem retrieving the data:\n" + je_xmlHttp.statusText);
				}
			}
		}