JQuery中的AJAX

 

 * jQuery中的Ajax

   * 封装第一层 - 类似于原生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 - 错误异常信息

   * 封装第二层 - 基于第一层再次封装

     * $().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()方法一致

   * 封装第三层 - 特殊用法

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

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

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

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

 * 表单的Ajax异步请求

   * 表单的序列化

     * serialize()方法

       * 返回JSON字符串

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

     * serializeArray()方法

       * 返回JSON对象

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

     * 注意

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

   * jQuery.form插件

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

     * 两个核心方法

       * ajaxForm()方法

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

     * 底层机制

       * 表单提交机制

   * 表单异步提交的方式

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

       * 通过为button按钮绑定click事件

         * 表单的序列化

        * 表单的异步提交

     * (常用)依旧使用submit按钮

       * 在<form>元素绑定onsubmit事件

       * 在onsubmit事件的处理函数中

         * 表单的序列化

        * 表单的异步提交

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

 * 跨域请求 - $.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

   * 万维网协议

     * 默认是不允许跨域请求的

   * 实现跨域

 * Cookie

   * 基本内容

     * 浏览器的缓存

       * 存储在浏览器内存中

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

       * 存储在用户电脑硬盘中

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

     * Cookie(小甜饼)

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

     * 问题

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

       * Cookie谁都可以读取

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

   * 如何操作操作

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

       * document.cookie

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

       * 格式 - key=value;expires=时间

       * document.cookie

posted @ 2015-12-13 15:42  白艳风  阅读(94)  评论(0编辑  收藏  举报