学习ajax详解

Ajax:

 * Ajax概述:
   * Ajax的原理
     * 什么是Ajax
       * 异步和同步
         * 同步:
  * 客户端页面向服务器端发送请求，直到服务器端将响应发送回来，这个过程中，页面是不能做任何事情。
* 异步:
  * 客户端页面向服务器端发送请求，直到服务器端将响应发送回来，这个过程中，页面可以去做任何事情。
       * Ajax的定义:
         (不严格)客户端与服务器端进行交互,而无需刷新当前页面的技术.
       * 作用:
         * 可以实现同步交互所不能完成的功能，提高同步实现的效果。
* 页面减少了，只用一个页面即可。
       * 缺点:
         * 小则怡情，大则伤身（Ajax的异步实现不能过多使用）
     * Ajax的原理：参考PPT P6
     * Ajax的对象:
       * Ajax的核心对象:XMLHttpRequest（XHR）对象
         * IE使用的是XMLHTTP对象
       * 浏览器兼容性:
         * 判断当前用户的浏览器是IE还是其他浏览器
       * 创建Ajax对象:
          if(window . XMLHttpRequest){
     //其他浏览器
     xhr = new XMLHttpRequest();
 }else{
    //IE8以上
    xhr = new ActiveXObject('Microsoft . XMLHttp');
 }
   * Ajax对象的属性和方法
     * 方法
       * open( method, url, async )方法:向服务器端创建一个请求
         * method参数：指定当前请求的方式，GET和POST。
* url参数：指定当前请求的服务器端地址。
* async参数：指定当前请求是否为异步，Boolean值。
   * true：表示的是异步。
   * false：表示的是同步，目前W3C的最新规范不建议使用同步。
       * send()方法：发送请求的参数。
         * 参数：请求参数
     * 属性
       * readyState：请求的状态
         * 0 - 尚未初始化
* 1 - 正在发送请求
* 2 - 请求完成
* 3 - 正在响应
* 4 - 响应完毕
       * status：服务器端返回的状态码
         * 404 - 找不到网页
* 200 - OK
* 302 - 请求转发
* 304 - 请求缓存
* 500 - 内部服务器错误
       * responseText：表示的是服务器端返回的文本内容。
       * responseXML：表示的是服务器端返回的XML格式内容。
     * 事件
       * onreadystatechange：用于监听服务器端的状态变化
         * 当readyState属性的值变化时，会触发onreadystatechange事件
 * Ajax的作用:
   * GET请求：
     * 创建Ajax的核心对象：略
     * 创建请求：
        open( method , url )：
* 如果GET方式的话，请求参数需要添加在URL后面
     * 发送请求
       send()方法：
       * 如果GET方式的话，send( null )
     * 接收响应
       onreadystatechange事件
       readyState和status属性：
       * readyState属性：Ajax从请求到响应的整个过程
       * status属性：告诉我们Ajax请求是否成功
       * responseText属性：接收服务器端的响应
   * POST请求：（与GET方式的区别）
     * open()方法中的method参数为POST
     * 如果请求方式为POST的话，send()方法可以发送请求参数
     * 设置请求头信息：
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

 * Ajax的应用

* XML

   * 概述：
     * XML译为可扩展标记语言，全称eXtensible  Markup  Language。
     * 发展过程：
       * 基于XML基础上，出现XHTML语言 - 替代HTML。
       * XHTML 发展到2.0，XML野心破灭了。
     * 作用：
       * 用于数据的存储（数据的传输 -请求和响应）
       * 用于配制文件（了解）
     * 特点：
       * 使用标签，XML的标签允许自定义的。
       * 标签同样具有文本和属性。
     * XML解释：利用DOM解析
   * 语法：
     * XML文件的扩展名为".xml"
     * XML声明：
       * 注意：
         * 声明必须从文档的0行0列位置开始
* 声明必须为<?xml开头，以?>结束
       * 属性：
         * version属性：表示当前XML文件的版本，固定为1.0.
* encoding属性：表示当前XML文件的编码。
     * 元素
       * XML标签对大小写敏感。
       * 元素具有属性和文本，包含其他元素。
     * 属性：
       * 属性值必须用引号引起来，单双引号均可使用。
   * XML应用：
     * JavaScript解析XML
       * 使用JavaScript中的DOM（XML DOM）解析XML
       * 通过XML DOM对象解析对应的XML内容：
         * 其他浏览器
  var parser = new DOMParser();
  parser.parseFromString( xml, type );
  * xml参数：指定当前要解析的XML名称。
  * type参数：指定当前要解析的XML类型。（"application/xml"或"text/xml"）
  * 返回值：表示解析XML后得到可以被DOM解析的内容。
* IE浏览器
  var xmlDoc = new 
     ActiveXObject("Microsoft.XMLDOM");
       * 利用DOM解析XML：
         * getElementById()和getElementsByName()方法不能使用。
* getElementsByTagName()方法是有效的。
       * 注意：
         * 目前W3C最新规范不允许读取本地的XML文档，只能读取XML格式的字符串。
* 之前的W3C规范是允许读取本地的XML文档。
     * Ajax解析XML
       * Ajax的请求参数与响应数据更改为XML格式。
       * 请求参数的格式为XML：
         * 参数的类型依旧是字符串类型。
* 该字符串的内容为XML格式。
       * 响应数据的格式为XML：
         * 在Ajax中使用xhr对象的responseXML属性接收。
  * （推荐）接收的数据格式已经是可以解析的XML格式，不需转换。
  * 使用responseText来接收，利用XML解析器手动转换。
* 利用XML DOM解析

 * JSON

   * 概述：
     * 定义：是一种轻量级的数据交换格式。
     * 特点：
       * 易于程序员阅读
       * 易于计算机解析
     * 用途：用于数据交换
     * 结构：
       * JavaScript Object：{ key : value }
       * JavaScript Array：[ 1,2,3,4 ]
     * JSON文件的扩展名为".json"
   * 使用：
     * JavaScript中如何解析JSON格式：
       * eval()方法：将JSON格式的字符串转换成Object或Array。
         * 注意：eval("("+JSON格式的字符串+")")
   原因：不加"()"时，可能导致JSON的转换失败。
       * JSON.parse()方法：将JSON格式的字符串转换成Object或Array。
       
       * JSON.stringify( jsObj )方法：将Object或Array转换成JSON格式的字符串
         * 注意：IE 7 不能使用JSON.parse()和JSON.stringify()
   * 应用：
     * Ajax中使用JSON（二级联动）

* Ajax的增强操作

   * jQuery对Ajax的支持
     * 第一组：最基本的用法，最复杂
       * $.ajax( url, [setting] )方法
     * 第二组：
       * load( url, [data], [callback] )方法
       * $.get( url, [data], [callback], [type] )方法
         * 该方法要求请求方式必须是GET
       * $.post( url, [data], [callback], [type] )方法
         * 该方法要求请求方式必须是POST
     * 第三组（了解）：
       * $.getScript( url, [callback] )方法
         * 作用：动态读取JavaScript脚本代码
       * $.getJSON( url, [data], [callback] )方法
         * 作用：
  * 只是用于读取JSON格式的数据内容
  * 解决Ajax的跨域请求（了解） —— JSONP模式
   * 表单操作
     * Ajax中的表单提交：
       * 不能再使用表单的submit事件
       * 为button增加onclick事件，处理函数中进行Ajax异步请求
       * 问题：
         * 如何获取表单中所有的元素值。（元素过多时）
     * 实现Ajax提交表单的步骤：
       * 使用getElementById()或jQuery获取表单中所有的元素值
         * 问题：表单中具有多少元素内容（元素越多，获取越复杂）
       * 将获取的所有元素值进行拼串（文本、XML和JSON）
         * 问题：必须要面对字符串的拼串（极容易出错）
       * 使用Ajax异步提交表单
     * 表单的序列化：
       * 定义：从关注表单中的元素，到只关注表单本身，通过表单的序列化得到对应表单中的所有元素值。
       * 表单序列化：（jQuery）
         * serialize()方法：将指定的表单元素序列化成JSON格式的字符串
* serializeArray()方法：将指定的表单元素序列化成JSON格式的数组
       * 注意：
         * 序列化表单元素，元素具有name属性。
* 表单具有多选框的话，直接序列化表单时：结果是不正确的。
     * jQuery.form插件：
       * ajaxForm()方法：用于表单验证的方法（不能提交表单）。
       * （只使用）ajaxSubmit()方法：用于提交表单。
          * url
 * type
 * dataType
 * beforeSubmit:function
   * 提交表单之前完成的功能
     function(fromData,jqFrom,options){}
     * formData：表单中元素的值（数组）
     * jqForm：表单的jQuery对象
 * success:function
   * 提交表单成功后的回调函数
      function(responseText,statusText){}
      * responseText：服务器端响应的数据内容
      * statusText：请求状态

 * 标准化的Ajax - RESTful

   * Http协议的四个请求方式：
     GET - 获取资源
     POST - 新建资源
     PUT - 修改或更新资源
     DELETE - 删除资源
   * 客户端向服务器端发送的请求链接：
     GET http://www.xxx.com/users - 获取服务器端users资源
     GET http://www.xxx.com/users/13 - 获取服务器端users资源中的id为13的用户信息