ajax开发步骤

前端之家收集整理的这篇文章主要介绍了ajax开发步骤前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
//第一个:创建ajax引擎对象 这是ajax开发的核心对象 XmlHttpRequest
function createXmlHttpRequest(){
    var xmlHttp;
    try { //Firefox,Opera 8.0+,Safari
        xmlHttp = new XMLHttpRequest();
    } 
    catch (e) {
        try { //Internet Explorer
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } 
        catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            catch (e) {
            }
        }
    }
    return xmlHttp;
}
window.onload=function(){
    document.getElementById("ok").onclick = function(){
        //1.创建一个ajax引擎
		var xmlHttp=createXmlHttpRequest();
		//4.处理服务器响应数据
		 xmlHttp.onreadystatechange=function(){
		 	alert(xmlHttp.readyState)
			if(xmlHttp.readyState==4){
				if(xmlHttp.status==200 || xmlHttp.status==304){
					//接受服务器响应结果;	
					var data=xmlHttp.responseText;
					alert(data);
				}
			}
		 }
		
		//2.打开一个连接
		/**
		 * open(method,url,asynch)
		 * method:请求类型:get和post;字符串
		 * URL:请求路径可以是相对路径和绝对路径
		 * asynch:表示是否是异步传输:默认是true异步的
		 */
		xmlHttp.open("get","../ajaxServlet?name=liuzhaoqiang×tamp="+new Date().getTime(),true);
		//如果是post请求的需要从小设置编码格式  这样可以通知服务器当的请求格式
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

		//3.项服务器发送数据
		/**
		 * send(data) data:客户端项服务器发送的数据 
		 * 若选用的是get请求:这不会发送任何数据 给send方法传递null  如果传值服务器也接收不到
		 * 
		 */
		xmlHttp.send(null);	
		
		/**
		 * onreadystatechange=function(){};
		 * 事件处理函数(监听器) 可以监听服务器端每一步的操作  操作通知给浏览器  有服务器触发
		 * 这依靠更新 XMLHttpRequest 对象的 readyState 来实现。改变 readyState 属性是服务器对客户端连接操作的一种方式
		 *  0 代表未初始化。 还没有调用 open 方法
			1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用
			2 代表已加载完毕。send 已被调用。请求已经开始
			3 代表交互中。服务器正在发送响应
			4 代表完成。响应发送完毕
			每次 readyState 值的改变,都会触发 readystatechange 事件
				在xmlHttpRequest对象中同时存放status对象 存放访问服务器的状态码
				404 没找到页面(not found)
				403 禁止访问(forbidden)
				500 内部服务器出错(internal service error)
				200 一切正常(ok)
				304 没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改 )
		 */	
		
    }
}

原文链接:https://www.f2er.com/ajax/166461.html

猜你在找的Ajax相关文章