Ajax基本用法

        Ajax的全称是:Asynchronous JavaScript and Xml。常用于B/S架构上,是实现客户端与服务器端异步交互的主要手段。浏览器与服务器端的交互有同步,异步两种,有何差别呢?

        同步交互:

指客户端向服务器端发送请求,到服务器端进行响应,这个过程不能做其他的事情,只有等待请求完成。

        异步交互:

指客户端向服务器端发送请求,到服务器端进行响应,这个过程能做其他的事情,不用等待请求完成。

具体区别:同步 执行速度相对异步较慢,响应结果是完整的HTML页面;异步 执行速度快 相应结果是部分数据。

Ajax的核心对象是XMLHttpRequest,Ajax执行过程中的所有方法都要在在该对象中调用。

创建XMLHttpRequest对象:

function createXMLHttpRequest() {
		var XMLHttpRequest1;
		if(window.XMLHttpRequest) {
			XMLhttpRequest1 = new XMLHttpRequest();
		}else if(window.ActiveXObject) {
			try{
				XMLHttpRequest1 = new ActiveXObject();
			}catch(e){
				XMLHttpRequest1 = new ActiveXObject("MicroSoft.XMLHTTP");
			}
		}
		return XMLHttpRequest1;
	}

建立连接,发送数据

function ajax() {
		var param1 = document.getElementById("param1").value;
		var param1 = document.getElementById("param1").value;
		var XMLHttpRequest1 = createXMLHttpRequest();
		var url = "/AjaxServlet"
		XMLHttpRequest1.open("POST",url,true);
		XMLHttpRequest1.setRequestHeader("Content-type","application/x-www-form-urlencode");
		XMLHttpRequest1.send("param1="+param1+",param2="+param2);
		XMLHttpRequest1.onreadystatechange = function() {   //回调函数
			if(XMLHttpRequest1.readyState == 4) {
				if(XMLHttpRequest1.status == 200) {
					alert(XMLHttpRequest1.responseText);
				}else{
					alert("网络连接中断!");
				}
			}
		};
	}

总结一下步骤:

1.创建Ajax对象。

2.配置Ajax,创建HTTP连接。

3.向服务器发送请求。

4.创建Ajax对象变化的监听。

5.在回调函数中接收服务器返回的数据。


猜你喜欢

转载自blog.csdn.net/bingocoder/article/details/80541688
今日推荐