Ajax小结

阅读更多

①定义：AJAX是一种快速创建动态网页的技术

传统的网页如果需要更新内容，必需重载整个网页面，而ajax通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

 （不需要任何浏览器插件，但需要用户允许javascript在浏览器上执行）

 

②部分更新实用例子：有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图和qq点赞等。

 

③向服务器发送请求时需要规定：规定请求的类型、URL和具体数据data

method：请求的类型有GET 或 POST（通过 POST 读取的页面不被缓存）

区别：（1）Get是向服务器发索取数据的一种请求，而Post是向服务器提交数据的一种请求

 　　（2）GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和　　　　　　　密码等。在某种情况下，GET方式会带来严重的安全性问题，而POST方式相对来说可以避免这些问题

 

          所以GET请求常在搜索时应用（例如现代浏览器搜索信息时，你所搜索的内容会附加在URL后面），而POST请求常用于修改用户密码隐私信息时应用。

 

data：发送到服务器的数据

注释:：如果不是字符串，将自动转换为字符串格式。GET请求中将附加在url后。对象必须为key/value格式

url：服务器上文件的地址，可以是任何类型的文件，比如.txt，或者服务器脚本文件，如.php(在传回响应之前，能够在服务器上执行文件)

js：绑定和处理所有数据；

DOM：实现动态显示和交互

 

④服务器响应：请求成功后的回调函数，有两个参数

（1）由服务器返回，并且根据dataType参数进行处理后的数据

（2）描述状态的字符串

function(data) {
　　//data可能是html、text等
　　this;//调用本次Ajax请求时传递的options参数
}

 

⑤jQuery ajax post例子：

 $(document).ready(function(){
   $.ajax({
            //提交数据的类型 POST/GET
            type:"POST",
            //提交的网址
            url:"add",
            //提交的数据
            data:{name:"name"},
            //成功返回之后调用的函数            
            success:function(data){
                 $(".add:focus").siblings('.num').text(data)  //接受返回数据反映到页面         
             }
            //调用出错执行的函数
            error: function(){
                //请求出错处理
             }        
         });
});
//url (String) 请求的HTML页的URL地址
//data (Map)(可选参数) 发送至服务器的 key/value 数据

 在jquery的ajax函数中，可以传入3种类型的数据

(1)文本(2)json对象(3)json数组

 

⑥dataType类型：

指定返回的数据类型。该属性值可以为：
xml:返回XML文档，可使用jQuery进行处理
html: 返回HTML字符串
script: 返回JavaScript代码，不会自动缓存结果。除非设置了cache参数
json: 返回JSON数据，JSON数据将使用语法进行解析(属性名必须加双引号，所有字符串也必须用双引号)，如果解析失败将抛出一个错误。从jQuery 1.9开始，空内容的响应将返回null或{}
text: 返回纯文本字符串