Ajax与jQuery

认识Ajax

在传统的Web应用中，每次请求服务器都会生成新的页面，用户在提交请求后，总是要等待服务器的响应。如果前一个请求没有得到响应，则后一个请求就不能发送。由于这是一种独占式的请求，因此如果服务器响应没有结束，用户就只能等待或者不断刷新页面。在等待期间，由于新的页面没有生成，整个浏览器一片空白，而用户只能继续等待。对于用户而言，这是一种不连续的体验，同时，不断的刷新页面也会使服务器的负担加重。

Ajax技术正是为了弥补以上不足在诞生的，Ajax应用在使用javaScript异步发送请求，不用每次请求都重新加载页面，发送请求时可以继续其他的操作，在服务器相应完成后，在使用Javascript将响应展示给用户。
使用Ajax技术，从用户发送请求到获得响应，当前用户界面在整个过程中不会受到干扰，而且我们可以在必要的时候只更新页面的一小部分，而不用刷新整个页面，即 “无刷新”技术。
如下图所示：

传统web开发技术和Ajax技术的区别

Ajax简介

Ajax(Asynchronous JavaScript and XML)并不是一种全新的技术而是由javascript，XML，CSS等几种现有的技术整合而成。Ajax的执行流程是，用户界面触发事件调用javascript，通过Ajax引擎——XMLHttpRequest对象异步发送请求到服务器，服务器返回XML，JSON或HTML等格式的数据，然后利用返回的数据使用DOM和css技术局部更新内容。工作流程如下：

XMLHttpRequest

XMLHttpRequest对象可以在不刷新当前页面的情况下向服务器端发送异步请求，并接受服务器端的响应结果，从而实现局部更新当前页面的功能 ，XMLHttpRequest得到了目前所有浏览器较好的支持，但他的创建方式在不同浏览器下还具有一定的差别。

创建XMLHttpRequest对象
老版本IE IE5 IE6
语法：

XMLHttpRequest = new ActiveXobject("Microsoft.XMLHTTP");

新版本IE和大部分浏览器
语法：

XMLHttpRequest  = new XMLHttpRequest();

XMLHttpRequest 的常用方法
对于Ajax技术而言，主要就是XMLHttpRequest的使用。

XMLHttpRequest 的常用属性


实现Ajax的过程分为发送请求和处理响应两个步骤，发送请求可以分为两种方式，即GET方式和POST方式，处理响应也分为两种，即处理文本响应和处理XML响应。

get请求和post请求的区别如下：

需要注意的是，采用GET方式发送请求时，通常会将需要携带的参数附加在URL路径后面一起发送，send（）方法不能传递参数，参数设置为null即可；而采用post发送请求时，则可以在send（）方法中指定传递的参数。

使用JQuery实现Ajax

jQuery将Ajax相关的操作都进行了封装，只需简单调用一个方法即可完成请求发送和复杂格式结果的解析，相比而言，使用jQuery实现Ajax更加简洁且结构清晰。

$.ajax()方法

$.ajax()可以通过发送Http请求加载远成数据，是Jquery最底层的Ajax实现，具有较高的灵活性。

用户名验证示例：

用户名: <input type="text" id="userName" onblur="chuli()"><div id="nameDiv"></div>
    <script src="/ch10yv/js/jquery-1.12.4.js"></script>
    <script language="JavaScript">
        //1.创建XMLHttpRequest对象
       function chuli