AJAX笔记（三）用jQuery实现异步请求

1、封装第一层 - 类似于原生Ajax的用法

    $.ajax() - 最复杂

       选项

             url - 请求地址

             type - 请求类型,默认为GET

             async - 是否异步,默认为true

             data - 请求数据,格式为key:value

             dataType - 响应数据格式

                 HTML格式

                 XML格式

                 JSON格式

             success - 请求成功后的回调函数

             function(data,textStatus){}

                data - 响应数据内容

                 textStatus - success,请求状态

             error - 请求失败后的回调函数

             function(XMLHttpRequest,textStatus,errorThrown){}

               XMLHttpRequest - Ajax的核心对象

               textStatus - 请求状态

                 error、timeout及notmodified等

               errorThrown - 错误异常信息

2、封装第二层 - 基于第一层再次封装

     $().load(url,data,callback) - 最简单、局限性最大

                参数

                 url - 设置当前Ajax的请求地址

            data - 设置当前Ajax的请求数据

               格式要求为key:value,构建Object即可

             callback - Ajax请求成功后的回调函数

               该回调函数的形参(data),表示服务器端响应的数据内容

                 问题：

              请求类型由是否发送请求数据决定，没有发送请求数据时,请求类型为GET，如果发送请求数据时,请求类型为POST，默               认接收服务器端的数据内容是以字符串类型(HTML格式)进行接收无法使用XML格式或JSON格式

     $.get(url,data,callback,type) - 请求类型是GET

       参数

                  url - 设置当前Ajax的请求地址

              data - 设置当前Ajax的请求数据

               格式要求为key:value,构建Object即可

              callback - Ajax请求成功后的回调函数

              该回调函数的形参(data),表示服务器端响应的数据内容

                  type - 设置服务器端响应数据的格式

                  默认值 - HTML格式

                 xml - XML格式

                 json - JSON格式

     $.post() - 请求类型是POST

                     使用方式与$.get()方法一致

3、封装第三层 - 特殊用法

       $.getScript(url,callback) - 动态读取脚本(JavaScript代码)

                    url - 读取脚本的地址(本地或服务器)

                    callback - 读取成功后的回调函数

       $.getJSON() - 接收JSON格式数据

4、表单的Ajax异步请求

     表单的序列化

       serialize()方法

         返回JSON字符串

         格式 - {key:value,key:value,..}

       serializeArray()方法

         返回JSON对象

         格式 - [obj1,obj2,obj3,...]

       注意

         表单元素必须具有name属性值

     jQuery.form插件

       作用 - 实现表单的异步提交

       两个核心方法

         ajaxForm()方法

         ajaxSubmit()方法 - 使用Ajax异步提交表单

       底层机制

         表单提交机制

     表单异步提交的方式

       不再使用submit按钮,而是使用button按钮

         通过为button按钮绑定click事件

           表单的序列化

   表单的异步提交

       (常用)依旧使用submit按钮

         在

元素绑定onsubmit事件

         在onsubmit事件的处理函数中

           表单的序列化

   表单的异步提交

   阻止表单默认行为(return false)

5、跨域请求 - $.getJSON()方法

     跨域

       完全跨域 - IP不同

         http://www.baidu.com

         http://www.tedu.cn

       跨子域 - IP相同,但端口号不同

         http://127.0.0.1:8888

         http://127.0.0.1:9999

     域名

       顶级域名

         http://www.baidu.com

       二级域名

         http://wenku.baidu.com

         http://www.baidu.com/kongjian

     万维网协议

       默认是不允许跨域请求的

    5、Cookie

     基本内容

       浏览器的缓存

         存储在浏览器内存中

           关闭浏览器(窗口)后,数据会被自动销毁

         存储在用户电脑硬盘中

           关闭浏览器(窗口)后,数据不会被销毁

       Cookie(小甜饼)

         缓存文件 - 一些用户数据存储在此

       问题

         用户数据是以明码(明文)来存储的

         Cookie谁都可以读取

         A网站生成的Cookie文件,归属到百度

     如何操作操作

       读取Cookie - 将用户名或密码从Cookie读取

         document.cookie

       写入Cookie - 将用户名或密码写入到Cookie文件

         格式 - key=value;expires=时间

         document.cookie