Ajax入门

一、概念

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

AJAX 是一种用于创建快速动态网页的技术。

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

案例介绍：

在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

二、图解

注意观察图中的区别

三、实现方式

原生js的实现方式（了解）

<span>输入账号 :</span>
<input id="name" name="name" onkeyup="check()" type="text"> 
<span id="checkResult"></span>
 
<script>
var xmlhttp;
function check(){
  var name = document.getElementById("name").value;
  var url = "http://how2j.cn/study/checkName.jsp?name="+name;
 
  xmlhttp =new XMLHttpRequest();
  xmlhttp.onreadystatechange=checkResult; //响应函数
  xmlhttp.open("GET",url,true);   //设置访问的页面,第三个参数一般都会设置为true
    /*
    规定请求的类型、URL 以及是否异步处理请求。
	method：请求的类型；GET 或 POST
	url：文件在服务器上的位置
	async：true（异步）或 false（同步）
    */
  xmlhttp.send(null);  //执行访问 post的请求可以传参，这里是get方式
}
 
function checkResult(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
  
}
 
</script>

jquery实现ajax

$.ajax({
   url: page, // 访问的url
   data:{"name":value}, // 请求参数
   success: function(result){ // 响应成功后的回调函数
      $("#checkResult").html(result);
   }
});

$.get(	// $.get(URL,callback);只有第一个参数必须，get请求的参数可以写在url里面，也可以像如下这么写
            page,
            {"name":value},
            function(result){
              $("#checkResult").html(result);
            }
);

 // 与get方法一样，
$.post(
    page,
    {"name":value},
    function(result){
        $("#checkResult").html(result);
    }
);

<div id="checkResult"></div>
    
输入账号 :<input id="name" type="text">
    
<script>
$(function(){
   $("#name").keyup(function(){
     var value = $(this).val();
     var page = "/study/checkName.jsp?name="+value;
     $("#checkResult").load(page);
     //语法：$(selector).load(URL,data,callback);
     /*
     必需的 URL 参数规定您希望加载的 URL。

	可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

	可选的 callback 参数是 load() 方法完成后所执行的函数名称。*/
   });
});
   
</script>