（引入jquery的情况下）ajax的使用及原理

一，ajax到底是什么？

   通过AJAX Asynchronous JavaScript And XML 实现异步刷新
   通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。
   这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

比较高大上的说法：一种创建交互式网页应用的网页开发技术。
个人理解的说法：其实就是为了减少资源的浪费，页面上少部分刷新的网页技术(一般叫异步刷新)，使网页的以小部分区域的内容发生改变,

二，ajax 的优点：它可以在不加载整个页面的基础上，对页面的某个部分进行更新。

三，如何使用ajax？

基本步骤：
1.创建XMLhttpRequest对象
2.设置响应函数onreadystatechange；
3.打开网页（也可以说是设置网页的地址）；open（“GET”，url，true）；
4.发送请求；send(null);
5.服务器的响应返回后，响应函数被调用
6.处理响应，判断响应是否成功，如果成功获取服务端返回的文本，在div或span上显示出来。

四，ajax原理

 分析1 创建XHR对象 XMLHttpRequest
      XHR对象是一个javascript对象，它可以在用户没有感觉的情况下，就像背后运行的一根小线程一般，悄悄的和服务器进行数据交互
      AJAX就是通过它做到无刷新效果的
	  
    分析2 设置响应函数
	  XHR对象的作用是和服务器进行交互，所以既会发消息给服务器，也能接受服务器返回的响应。 
	  当服务器响应回来的时候，调用怎么处理呢？ 
	  通过 xmlhttp.onreadystatechange=checkResult 就可以指定用checkResult 函数进行处理。
	  
    分析3 设置并发出请求
	  通过open函数设置背后的这个小线程，将要访问的页面url ，
	  xmlhttp.open("GET",url,true);
	  通过send函数进行实际的访问
	  xmlhttp.send(null);
	  null表示没有参数，因为参数已经通过“GET" 方式，放在url里了。
	  只有在用"POST"，并且需要发送参数的时候，才会使用到send。
	  类似这样：
	  xmlhttp.send("user="+username+"&password="+password)
	  
	分析4 处理响应信息
	  xmlhttp.readyState 4 表示请求已完成
	  xmlhttp.status 200 表示响应成功
	  xmlhttp.responseText; 用于获取服务端传回来的文本

四种请求方法

1>提交AJAX请求

参考 使用AJAX 通过无刷新验证账号是否存在 这个例子,服务端使用JSP进行验证，当用户输入值的时候提示"已经存在"
完整的 $.ajax 参数 比较复杂，这里采用了常见的调用方式。
 
$.ajax({
   url: page,
   type:'get',
   data:{"name":value},
   dataType:'jsonp',
   scrossDomain:true,
   success: function(result){
      $("#选择器").html(result);
   }
});
$.ajax采用参数集的方式 {param1,param2,param3} 不同的参数之间用,隔开
第一个参数 url:page 表示访问的是page页面
第二个参数 data:{name:value} 表示提交的参数
第三个参数 success: function(){} 表示服务器成功返回后对应的响应函数 

2> get

$.get 是 $.ajax的简化版，专门用于发送GET请求 
 
$.get(
     page,
     {"name":value},
     function(result){
         $("#checkResult").html(result);
      }
);
$.get 使用3个参数
第一个参数: page 访问的页面
第二个参数: {name:value} 提交的数据
第三个参数: function(){} 响应函数
只有第一个参数是必须的，其他参数都是可选 

3> post

$.post 是 $.ajax的简化版，专门用于发送POST请求 
 
$.post(
    page,
    {"name":value},
    function(result){
        $("#checkResult").html(result);
    }
);
$.post 使用3个参数
第一个参数: page 访问的页面
第二个参数: {name:value} 提交的数据
第三个参数: function(){} 响应函数
只有第一个参数是必须的，其他参数都是可选

4> load

$("#id").load(page,[data]); 
id: 用于显示AJAX服务端文本的元素Id 
page: 服务端页面 
data: 提交的数据，可选。 在本例中，直接在page里加上了参数列表