Ajax学习笔记

什么是Ajax？

Asynchronous JavaScript and XML

现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。

不用刷新整个页面便可与服务器通讯的方法：

Flash

Java Applet

框架：如果使用一组框架构造了一个网页，可以之更新其中一个框架，而不惊动整个页面

隐藏的iframe

XMLHttpRequest：该对象是对JavaScript的一个扩展，可使网页与服务器进行通信。是创建Ajax应用的最佳选择。

实际上通常把Ajax当成XMLHttpRequest对象的代名词。

 

Ajax的工作原理

其中，异步传输使用的对象就是XMLHttpRequest。

XMLHttpRequest封装了协议和数据，

前端可以使用JavaScript绑定和处理XMLHttpRequest数据。

Ajax的缺陷

• 由JavaScript和Ajax引擎导致的浏览器的兼容
• 页面局部刷新，导致后退功能失效
• 对流媒体的支持没有flash、java applet好
• 一些设备支持性差，如手机

XMLHttpRequest对象

不同浏览器的实现不同，但是API相同，所以可以使用同样的方式使用XMLHttpRequest对象的属性和方法。

上面Ajax的缺陷的第一点，提到了兼容性的问题，但是划了删除线，因为很多前端框架都对此作了兼容，可以直接用。但是为了更好的用框架，我们还是要知道些原理，下面看看jQuery中的封装：

// Functions to create xhrs
function createStandardXHR() {
	try {
		return new window.XMLHttpRequest();
	} catch( e ) {}
}

function createActiveXHR() {
	try {
		return new window.ActiveXObject( "Microsoft.XMLHTTP" );
	} catch( e ) {}
}

// Create the request object
// (This is still attached to ajaxSettings for backward compatibility)
jQuery.ajaxSettings.xhr = window.ActiveXObject ?
	/* Microsoft failed to properly
	 * implement the XMLHttpRequest in IE7 (can't request local files),
	 * so we use the ActiveXObject when it is available
	 * Additionally XMLHttpRequest can be disabled in IE7/IE8 so
	 * we need a fallback.
	 */
	function() {
		return !this.isLocal && createStandardXHR() || createActiveXHR();
	} :
	// For all other browsers, use the standard XMLHttpRequest object
	createStandardXHR;

// Determine support properties
(function( xhr ) {
	jQuery.extend( jQuery.support, {
		ajax: !!xhr,
		cors: !!xhr && ( "withCredentials" in xhr )
	});
})( jQuery.ajaxSettings.xhr() );

在浏览器加载jquery.js文件时，立即执行闭包函数，传入jQuery.ajaxSettings.xhr()参数，将ajax属性注册到jQuery对象上，ajax属性值就是传入的参数，也就是jQuery.ajaxSettings.xhr()方法，该方法里面做了所谓的兼容工作：

IE7以前的浏览器，使用window.ActiveXObject作为XMLHttpRequest对象的实现，其他浏览器使用window.XMLHttpRequest作为XMLHttpRequest的实现。

XMLHttpRequest的主要方法：

open("method","url")

send(content)

setRequestHeader("header","value")

onreadystatechange,服务器触发该事件，每次readyState改变都会触发该事件

readyState

0 未初始化，open方法未调用

1 代表正在加载，open方法已被调用

2 代表已经加载完毕，send已被调用，请求已经开始

3 代表交互中，服务器正在发送响应

4 代表完成，响应完毕

responseText

responseXML

status

可以通过给url后面加上时间戳，禁用浏览器缓存

如果用POST请求发送数据，需要将Content-type的首部设置为"application/x-www-form-urlencoded"。它会告诉服务器正在发数据，并且数据已经符合URL编码了。

该方法必须在open()之后调用。

Ajax数据传输格式：

html: request.responseText

xml: request.responseXML

json: var result = request.responseText

var jsonObject = eval("(" + result + ")")

eval函数存在代码注入风险。

jQuery中的Ajax

底层方法$.ajax()，第二层是load()，$.get()和$.post()，第三层是$.getScript()和$.getJSON()。

 

load()

$("div").load(url,args);  不带参数是get请求，带参数是post请求

可以通过url selector只加载某些元素

$(function(){
    $("a").click(function(){
        var url = this.href + " h2 a";
        var args = {"time":new Date()};
        $("#details").load(url, args);
        return false;
    });
})

$.get()、$.post()、$.getJSON()使用方式都一样：

$(function(){
    $("a").click(function(){
        var url = this.href;
        var args = {"time":new Date()};

        $.getJSON(url,args,function(){
            var name = data.person.name;
            var email = data.person.email;
            var website = data.person.website;

            $("#details").empty()
                .append("<a href='"+ website+"'>" + website + "<a/>");

        });

        return false;
    });
})

 

$(function(){
    $("a").click(function(){
        var url = this.href;
        var args = {"time":new Date()};

        $.get(url,args,function(){
            var name = data.person.name;
            var email = data.person.email;
            var website = data.person.website;

            $("#details").empty()
                .append("<a href='"+ website+"'>" + website + "<a/>");

        },"JSON");

        return false;
    });
})

小结：

1、什么事Ajax？不用刷新页面，但可以和服务端进行通信的方式，使用Ajax的主要方式是XMLHttpRequest对象

2、使用XMLHttpRequest对象实现Ajax。[了解]

3、Ajax传输数据的3中方式：

XML、HTML、JSON

4、使用jQuery封装的Ajax API。[掌握]

$.ajax()、$.load()、$.get()、$.post()、