关于AJAX

什么是Ajax

ajax是什么？作用是什么？

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

ajax优点

1. 通过异步模式增加用户体验

   JavaScript是单线程的，这就意味着只有前面的任务结束才能继续下一个任，这种模式是同步的，而Ajax是异步的，它不需要打断用户操作就能执行下一个任务。

2. 优化了浏览器和服务器之间的传输，减少了不必要的数据往返，减少了宽带的占用。就是可以把服务器的一些工作传给客户端。

3. Ajax引擎在客户端运行，承担了而一部分本来由服务器承担的工作，从而减少了大用户下的服务器负载

ajax缺点

1. 不支持浏览器的back按钮

2. 安全问题Ajax暴露了与服务器的交换细节

3. 对搜索引擎的支持比较弱

 

XMLHttpRequest对象

XMLHttpRequest是支持异步请求技术，是Ajax的核心

作用：

1. 可以向服务器提出请求并处理响应，而不阻塞用户

2. 可以在加载页面的时候对页面进行更新

 

如何使用Ajax

• 创建XMLHttpRequest对象，也就是创建一个异步对象

• 创建一个新的HTTP请求，并指定改HTTP请求的方法、url

• 设置响应HTTP请求的变化函数

• 发送请求

• 获取异步调用返回的数据

• 使用JavaScript和DOM实现局部渲染

 

1、创建XMLHttpRequest对象

在运行Ajax文件的时候需要一个服务器，并且要把文件放在根目录下。

我的主目录是htdocs，并且把文件放在主目录里面的ajax文件中，所以在浏览器中直接输入http://localhost/ajax/a.html就可以打开文件。鼠标右键--->在浏览器打开是不行的。

 

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

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

 

封装通用的XMLHttpRequest对象，解决兼容问题

 

	function createXHR()
		{
			//判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7，firefox，opera等
			if(typeof(XMLHttpRequest)!='undefined'){
				return new XMLHttpRequest;
			}
			else if(typeof(ActiveXObject)!='undefined'){
				var xhrArr=['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
				var len=xhrArr.length,xhr;
				for(var i=0;i<len;i++){
					try{
						//创建XMLHttpRequest对象
						xhr=new ActiveXObject(xhrArr[i]);
						break;
					}
					catch(ex){
					
					}
					return xhr;
				}
			}
			else{
				throw new Error('no XHR');
			}
		}
		//创建XMLHttpRequest对象
		var xhr=createXHR(),data=null;

或者直接这样写也行

function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
}

2、创建HTTP请求

语法：open(method,url,async)

功能：创建HTTP请求，规定请求的类型，URL以及是否异步处理请求

参数说明：

• method：请求类型，GET或POST

• url：文件在服务器上的位置

• async ：true（异步）或false（同步）

注意：open方法不会向服务器发送真正的请求，它相当于初始化请求并准备发送只能向同一域中使用相同的协议或者端口的URL发送请求，否则会因为安全原因报错

url

url参数是open方法中唯一一个必须要指定的参数，用来设置服务器上文件的地址，该文件可以是任何类型的文件，如.txt和.xml,或者服务器脚本文件，如.asp和.php（在传回响应之前，能够在服务器上执行任务）

GET和POST区别

与post相比，get更简单也更快，并且在但部分情况下都能用，然而在一下情况必须使用post请求

• 无法使用缓存文件（更新服务器上的文件或数据库）

• 向服务器发送大量数据（post没有数据量限制）

• 发送包含未知字符的用户输入时，post比get更可靠

 

同步异步区别

• 同步：提交请求-->等待服务器处理-->处理完毕返回 这个期间客户端浏览器不能干任何事

• 异步：请求通过事件触发-->服务器处理（这时浏览器仍然可以处理其它事情）-->处理完毕

 

代码：

        //创建请求
        xhr.open("post",'server/slider.json',true);
        //发送请求
        xhr.send(null);
        //xhr.send({user:"zhangsan",id:6});当请求是post要传参的时候
        //设置http头部信息
        //xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 

 

3、设置响应HTTP请求的状态变化的函数

        //相应XMLHttpRequest对象状态变化的函数，onreadystatechange在readystatechange属性发生改变时触发
        xhr.onreadystatechange=function(){
            //异步调用成功，相应内容解析完成，可在客户端调用
            if(xhr.readyState===4){
                if((xhr.status>=200&&xhr.status<300)||xhr.status==304){//304表示请求资源没有被修改，可以使用缓存
                    //获得服务器返回数据
                    data=JSON.parse(xhr.responseText);
                    //渲染数据到页面中
                    renderDataToDom();
                }
            }
        }

当xhr.readyState值为0时表示还没初始化就是还没调用send方法，1的时候是已经调用了send方法，正在发送请求，2的时候是send方法已经执行完成了，3的时候表示正在解析响应内容，4的时候表示异步调用成功，相应内容解析完成，可在客户端调用。

4、发送请求

语法：send(string)

功能：将请求发送到服务器

注意：仅在post请求时，才能传递参数

 

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

  xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send("fname=Henry&lname=Ford");

 

当使用get方法是，可以将要传的参数放在url后面

        //创建请求
        xhr.open("post",'server/slider.json?name=zhangsan',true);
        //发送请求
        xhr.send(null);

 

如果是post方法，传参时可以这样写

        //创建请求
        xhr.open("post",'server/slider.json',true);
        //发送请求
        xhr.send({user:"zhangsan",id:6});当请求是post要传参的时候
        //设置http头部信息
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

 

5、获取异步调用返回的数据

服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。从服务器返回的数据的字符串形式
responseXML	获得 XML 形式的响应数据。从服务器返回的DOM兼容的文档数据对象

具体操作是在第三步中完成

 

6、使用JavaScript和Dom实现局部渲染

JSON.parse()可以将字符串转换成js对象

JSON.stringify()可以将js对象转换成字符串

        //渲染数据
        function renderDataToDom(){
            var img=data.slider,len=img.length,str="";
            var banner=document.getElementById("banner");
            for(var i=0;i<len;i++){
                str+='<a href="'+img[i].linkUrl+'"><img src="'+img[i].picUrl+'"></a>';
            }
            banner.innerHTML=str;
        }