jquery 和ajax

ajax的优势和不足

优势：

1：不需要任何插件的支持；

2：优秀的用户体验：能不在刷新整个页面的情况下更新数据。

3：提高web程序的性能：与传统模式相比，ajax最大的优点在于它的传输数据的方式，ajax模式只是通过XMLHttpRequest对象向服务器端提交的数据，即按需发送。

4：减轻服务器的带宽和负担：ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应之间异步话。它在客户端创建Ajax引擎，把传统方式下的一些服务器负担的工作转移到了客户端，便于客户端资源来处理，减轻服务器和带宽的负担。

 

ajax的不足：

1：浏览器对HTMLHttpRequest对象的支持度不足：IE6之后和现代版本的浏览器才会支持XMLHttpRequest。

2：破坏浏览器的前进和后退功能

3：对搜索引擎的支持的不足；

4：开发和调试工具的缺乏；

 

ajax的核心是XMLHttpRequest对象

一个Ajax的例子：

javascript方式实现：

点击一个按钮，用ajax的方式从服务器端取回一个HELLO ajax的字符并显示在页面上。

（1）定义一个函数，通过这个函数来异步获取信息

function ajax（）{

//...

}

2:声明一个空对象来装入XMLHttpRequest对象，代码如下

var xmlHttpRequest = null;

3:给这个对象赋值：

if(window.ActiveXObject){                   //IE5/6是以ActiveXObject的方式

var xmlHttpRequest=new Active XObject("Micsoft.XMLHttp");

}else if（window.XMLHttpRequest）{               //除了以上的浏览器，XMLHttpRequest是windows的子对象

xmlHttpRequest = new XMLHttpRequest();

}

4:实例化之后，使用open()方式初始化XMLHttpRequest对象，指定HTTP方法和要使用服务器的URL

xmlHttpRequest.open("GET","text.php",true)；//调用open（）方法采用异步方式

5：

因为要做一个异步调用，所以需要定义一个回调函数

xmlHttpRequest.onreadystatechange=RequestCallBack;//设置回调函数；

6：使用send方式发送请求

xmlHttpRequest.send（null）；//因为使用了GET方法提交，所以可以使用null来作为参数调用。

 

jQuery中的Ajax

在jquery中$.ajax()方法属于最底层的方法，第二层是load（）

$.ajax()的两种方法：

$.ajax([setting]);

$.ajax(url [setting])

处理回调函数的四种状态

seccess、error、complete、statuscode。

 

$.ajax("Server1.php",{
    success:function (data) {//从服务器返回的参数
        alert("got it")
    },
    error:function (jqXHR,textstatus,err) {
        //jqXHR jquery 增强的xhr
        //textstatus 请求完成状态
        //err 底层通过throw抛出的异常对象
        console.log(arguments);
    },
    complete:function (jqXHR,textstatus) {
        alert("you finish is request");
    }
})

使用load()方法异步请求数据

使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，它的调用格式为：

load(url,[data],[callback])

参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

使用getJSON()方法异步加载JSON格式数据

使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数据，并对获取的数据进行解析，显示在页面中，它的调用格式为：

jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])

其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

 

$(document).ready(function () {
    $("#btn").click(function () {
        $.getJSON("sport.json",function(data){
            $.each(data,function (index,item) {
                if(index==3)
                $("ul").append("<li>"+item["name"]+"</li>")
            })
        })
    })
})

使用get()方法以GET方式从服务器获取数据

使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下：

$.get(url,[callback])

参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。

 

 $(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                   $.get("http://www.imooc.com/data/info_f.php",function(data){
                       $("ul").append("<li>"+data.name+"</li>");              
                       $("ul").append("<li>"+data.say+"</li>");              
                   },"json")//转换为json方式显示
                })
            });

其他的内容我会尽快补充上去。