AJAX和JSON

1.AJAX

2.JSON

 

一、AJAX

1.概念

        Ajax 即"Asynchronous Javascript And XML"（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换，

        Ajax  可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

      异步提交，局部刷新

      ajax的实现：

      JS的ajax：出现最早。使用一个对象XMLHttpRequest对象。专门用于进行ajax请求发送，和响应的接收

        使用ajax发请求，使用ajax接收响应（难），使用JS进行页面刷新。

        1、若使用JS的AJAX技术，为了实现简单功能，就需要书写大量复杂代码。(滑动的效果)

        2、JS的AJAX代码，浏览器兼容性比较差。

    JQ的ajax：底层封装了JS的ajax代码，做了浏览器的兼容性。程序员仅需要调用简单的JQ的AJAX方法，就可以实现复杂的AJAX功能。

       1、少量代码，实现复杂功能

       2、浏览器兼容性好，一处编写，处处执行

2.ajax的应用场景

    （1）检查用户名是不是已经被注册

      很多站点的注册页面都具备自动检测用户名是否存在的友好提示，该功能整体页面并没有刷新，但仍然可以异步与服务器端进行数据交换，查询用户的输入的用户名是否在数据库中已经存在。

      

    （2）省市二联下拉框联动

      很多站点都存在输入用户地址的操作，在完成地址输入时，用户所在的省份是下拉框，当选择不同的省份时会出现   不同的市区的选择，这就是最常见的省市联动效果

      

 

    （3）内容自动补全

       不管是专注于搜索的百度，还是站点内商品搜索的京东，都有搜索功能，在i搜索框输入查询关键字时，整个页面没   有刷新，但会根据关键字显示相关查询字条，这个过程是异步的。

      

3.jQuery的Ajax

      作为JavaScript一个类库，必然也会有响应的ajax的功能，jQuery认为原生ajax过于复杂，所以进行了一次封装（jQuery的二次封装）。 定义多种书写ajax的方式。

     要求：先到jQuery类库。也叫脚本文件。

    语法

   $.ajax({

          url:"",

          data:{},

          type:"",

          dataType:"",

          success:function(){},

          error:function(){}

     });

    解析：

        $.ajax 声明使用的jQuery ajax语法结构

        url： 请求的地址

        data： 需要发送的数据{} 里面书写json格式的数据 {名字：值,名字：值}

        type： 请求类型 get/post

        dataType：声明返回数据（响应主体中）的类型/格式

        success：执行成功之后调用的方法 等同于 xhr.readyState = 4

        error： 执行不等于4 调用的方法。 如果没有错误error可以省略

        注意事项：

        1、注意不要写错单词。

        2、ajax严格区分大小写。

        3、data为数据 date为日期 不要写混。

        4、冒号一定是英文的。

        5、ajax中书写的每一项结尾都要跟随逗号，除最后一个

        6、dataType  T要大写。

        7、$.ajax内的选项不区分顺序。

     （1）$.get()

     语法结构:

     $.get(

          "url",

          {json数据},

          function(obj){},

          "返回数据格式"

     );

       特点：直接使用jQuery ajax中的get发送异步请求。虽然变得写法简单，但是没有error回调函数，出错调试比较考验功底。并且最重要的一条，顺序不能错。

       第一个参数是url地址

       第二个参数是发送的数据

       第三个参数是成功回调的方法

       第四个参数是返回值的类型

      （2）$.post()

      $.post(

           "url",

            {json数据},

           function(obj){},

            "返回数据格式"

      );

       特点：直接使用jQuery ajax中的post发送异步请求。虽然变得写法简单，但是没有error回调函数，出错调试比较考验功底。并且最重要的一条，顺序不能错。

     （3）AJAX可以返回的数据类型

     XML：早起AJAX都用XML传输数据（被JSON取代）

     text：文本格式，字符串格式（所有数据都能用这种格式接收）

     HTML：可以直接返回HTML代码

     script：脚本代码

     JSON：当今最流行的数据回交互方式

     JSONP:也是JSON格式，但是支持跨域访问。

4.案例

    （1）验证用户名是否已经被注册

     1、准备数据