使用jQuery实现Ajax

使用jQuery实现Ajax

jQuery对Ajax操作进行了封装，在jQuery中最底层的方法时$.ajax(),第二层是load(),$.get(),$.post(),第三层是$.getScript()和$.getJSON()

load()方法：

　　——load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程的HTML代码并插入到DOM中，它的结构是：load(url[,data][,callback])

参数：

　　url:String　　请求HTML页面的URL地址

　　data(可选):object　　发送服务器的key/value数据

　　callback(可选):function　　请求完成时的回调函数，无论请求成功或失败

（程序员只需要使用jQuery选择器为HTML片段指定目标位置，然后将要加载的文件的url作为参数传递给load()方法即可）

注意：

1.如果data有数据是post请求，没有是get请求

2.可以在url后拼加selector选择器，选取部分内容插入页面中

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

　

 get方法

post方法

获取xml文件格式

 $('a').click(function () {
                var url = this.href;
                var args = {"time":new Date()};
                /**
                 * url
                 * args:JSON格式
                 * function：回调函数被触发，响应结果在data中
                 */
                $.post/get(url,args,function (data) {
                    var name = $(data).find("name").text();
                    var email = $(data).find("email").text();
                    var website = $(data).find("website").text();

                    $('#details').empty()
                        .append("<h2><a href='"+email+"'>"+ name+"</a></h2>")
                        .append("<a href='" + website +"'>" + website + "</a>")
                })
                return false;
            })

　　

获取JSON文件格式

     $('a').click(function () {
                var url = this.href;
                var args = {"time":new Date()};
                /**
                 * url
                 * args:JSON格式
                 * function：回调函数被触发，响应结果在data中
                 */
                $.getJSON(url,args,function (data) {
                    var name = data.person.name;
                    var email =  data.person.email;
                    var website = data.person.website;

                    $('#details').empty()
                        .append("<h2><a href='"+email+"'>"+ name+"</a></h2>")
                        .append("<a href='" + website +"'>" + website + "</a>")
                })
　　　　
　　　　　　　　　　
                return false;
            })

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

                    $('#details').empty()
                        .append("<h2><a href='"+email+"'>"+ name+"</a></h2>")
                        .append("<a href='" + website +"'>" + website + "</a>")
                },JSON)