初识Ajax

Ajax= 异步 JavaScript 和 XML是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。Ajax实现了客户端与服务器端异步通信。

问：什么是异步请求？

答：所谓异步请求，就是浏览器不必等待HTTP响应完毕才继续执行，而是立即执行Javascript命令或请求，也就是说，HTTP请求与浏览器操作是不同步的。而在同步请求下，浏览器只有在响应完毕之后，才能继续执行后继任务或操作。

问：Ajax是如何实现这种异步请求的呢？

答：Ajax 是通过在客户端嵌入一个中间件（Ajax引擎，即XMLHttpRequest组件），并专门负责客户端与服务端通信，这样就不需刷新页面，浏览器也能通过Ajax引擎随时随地与服务器端保持异步通信和联系，服务器端相应的数据也不再是一个完整的页面，而是根据需要发送的响应信息。所以说XMLHttpRequest是Ajax的基础。

一、XMLHttpRequest

Ajax技术核心是XMLHttpRequest对象（简称XHR)。它提供了向服务器发送请求和解析服务器响应的接口。能够以异步客户端与服务器端进行通信的协议。客户端可以通过XMLHttpRequest对象向W用eb服务器发送请求并使DOM（文档对象模型）进行处理。然后再显示响应的数据。这就意味着可以在不重新加载整个页面的同时，对网页的部某分进行刷新。

1.创建XHP对象

语法：var xhr =new XMLHttpRequest

PS：老版本的IE使用Active 对象：variable=new ActiveXObject("Microsoft.XMLHTTP");

处理浏览器兼容问题:

        
         var xmlhttp;
         if (window.XMLHttpRequest)
              {// code for IE7+,Firefox,Chrome,Opera,Safari
              xmlhttp=new XMLHttpRequest();
          }
          else
          {// code for IE6,IE5
             xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
         }

2.发送请求：open()和send()方法

在使用XHR对象时，先必须调用 open()方法建立一个HTTP请求，即使用open()方法打开客户端与服务器端之间的通信连接。它接受三个参数，要发送的请求类型（get、post)、请求的URL和表示是否同步（Async)。

xhr.open('get','demo.PHP'.false)     //对于demo的get请求，false 表示同步

PHP 代码：

    <?PHP echo Date('Y-m-d H:i:s')?>    //一个时间

但是open()方法并不会真正发送请求，而只是启动一个请求以备发送。当建立连接请求之后，由send()方法发送请求到HTTP服务器端，并接收服务器端的响应。

send()方法接收一个参数，作为请求主体发送的数据。如果不传递信息,则为null。

二、Request

1.GET请求：

这是一种最常见的请求类型。GET方法是通过查询字符串的方式来传递请求的，最常用于向服务器查询某些信息。GET请求的参数通过问号（？）前缀附加在URL的末尾，参数是以连字符（&）连接的一个或多个名/值对。

例如：

xhr.open('get','demo.PHP?rand=' + Math.random() + '&name=Koo',true)；

通过URL后的问号给服务器传递键值对数据，服务器接收到返回响应数据。特殊字符传参的问题可使用encodeURLComponent()进行编码处理。

例如：

//一个通用的 URL 提交函数
function addURLParam(url,name,value) {
url += (url.indexOf('?') == -1 ? '?' : '&'); //判断的 url 是否有已有参数
url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
alert(url);
return url;
}

优缺点：使用GET请求比较简单，方便，适合传递一些简单的参数信息，不易传输大容量或受保护的数据。

2.POST请求

与GET请求不同的是，POST请求支持任意格式、任意长度的数据，而不仅仅限于名/值对。一般来说，POST请求用于在表单中输入数据后的提交过程。

例如：xhr.send('name=Lee&age=100');

与GET请求相似，POST请求的参数也必须进行编码，并用连字符（&)进行分隔，这些参数在发送POST请求时，不会附加到URL的末尾，而是作为send()方法的参数进行传递，然后被送到服务器端。

优缺点：

与GET想比较，POST方式传递的信息是无限的，且不受字符编码的限制，还可以传递二进制信息。适合传输文件及大容量信息，安全信息或XML格式数据。但是从性能上来说，POST请求比GET请求消耗更多。

三、封装Ajax

在使用Ajax时，往往由于参数问题，比较麻烦，比如说到底是使用GET还是POST，到底是同步还是异步处理等到，所以对Ajax进行封装成一个函数，这样在使用的时候就方便多了。

//封装ajax
function ajax(obj) {
	var xhr = createXHR(); //定义一个变量存储XMLHTTPRequest对象
	obj.url = obj.url + '?rand=' + Math.random(); 
	obj.data = params(obj.data);
        //get 请求处理方式
	if (obj.method === 'get') obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data; 
        //同步处理
        if (obj.async === true) {         
		xhr.onreadystatechange = function () {
			if (xhr.readyState == 4) {
				callback();
			}
		};
	}
	xhr.open(obj.method,obj.url,obj.async);

        //POST请求处理方式
	if (obj.method === 'post') {
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		xhr.send(obj.data);	
	} else {
		xhr.send(null);
	}
        //异步处理
	if (obj.async === false) {
		callback();
	}
	function callback() {
		if (xhr.status == 200) {
			obj.success(xhr.responseText);			//回调传递参数
		} else {
			alert('获取数据错误！错误代号：' + xhr.status + '，错误信息：' + xhr.statusText);
		}	
	}
}

调用Ajax:

addEvent(document,'click',function () {
	ajax({
		method : 'post',url : 'demo3.PHP',data : {
			'name' : 'Lee','age' : 100
		},success : function (text) {
			alert(text);
		},async : true
	});
});

Ajax的学习到这里并没有结束，而真正想更进一步的了解Ajax还需要到实践中去磨练。

原文地址：https://www.jb51.cc/ajax/546639.html

相关推荐