Ajax基本用法

Ajax

Ajax：Asynchronous Javascript And XML （异步的JavaScript和xml）它不是一种新的编程语言，是指一种对网页的某个部分进行更新的技术。

---

• 同步请求异步请求

  1. 同步请求

     同步请求的方式：超链接，地址栏，form表单
     特点：请求之后会刷新整张页面。
     弊端：刷新整张页面，浪费了网络资源，导致用户操作中断，造成用户体验很差。

  2. 异步请求

     异步请求方式：Ajax
     特点：多个时间并行发生，事件之间互不影响，不刷新整张页面，局部刷新。

• Ajax的核心对象
  XMLHttpRequest 是一个JavaScript对象，存在浏览器差异

• 发送GET请求

Javascript代码：

        //创建XMLHttpRequest对象
        var xhr;
        //判断浏览器
        if(window.XMLHttpRequest){
            //webkit内核
            xhr = new XMLHttpRequest();
        }else if(window.ActiveObject){
            //IE内核
            xhr = ActiveXObject("Microsoft.XMLHTTP");
        }
        $("#username").blur(function(){
            //获得输入框的值
            var username = $(this).val();
            //传递参数
            xhr.open("GET","/ajax_test/user/checkUserName?username="+username);
            xhr.send();
            //处理响应
            xhr.onreadystatechange=function(){
                if(xhr.status == 200 && xhr.readyState == 4){
                    $("#usernameMessage").html(xhr.responseText);
                }
            };  
        });

页面代码：

    <form>
        用户名：<input type="text" name="username" id="username" /><span
            id="usernameMessage"></span><br /> 密码：<input type="text"
            name="password" id="password" /><br />
    </form>

• 发送POST请求

        //创建XMLHttpRequest对象
        var xhr;
        $("#username").blur(function(){
            //判断浏览器
            if(window.XMLHttpRequest){
                //webkit内核
                xhr = new XMLHttpRequest();
            }else if(window.ActiveObject){
                //IE
                xhr = ActiveXObject("Microsoft.XMLHTTP");
            }
            //获得输入框的值
            var username = $(this).val();
            //判断username不能为空
            if(username == ""){
                $("#usernameMessage").html("用户名不能为空");
            }else{
                //传递参数
                xhr.open("POST","${pageContext.request.contextPath}/user/checkUserName");
                //设置相应头
                xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
                xhr.send("username="+username);
                //处理响应
                xhr.onreadystatechange=function(){
                    if(xhr.status == 200 && xhr.readyState == 4){
                        $("#usernameMessage").html(xhr.responseText);
                    }
                };  
            }
        });

页面代码：

    <form>
        username：<input type="text" name="username" id="username" /><span
            id="usernameMessage"></span><br /> password：<input type="password"
            name="password" id="password" /><br />
    </form>

jQuery对Ajax进行了封装，在实际中一般会使用jQuery封装的方法。

常用方法：

$.ajax()
$.get()
$.post()
$.getJSON()

jQuery.ajax(url,[settings])

    参数：
    url:一个用来包含发送请求的URL字符串。
    settings:AJAX 请求设置。所有选项都是可选的。

$.ajax({
    type:"POST",
    url:"/ajax_test/user/checkUserName",
    data:{username:name},
    //data:"username="name
    success:function(data){
        alert(data);
    }
});

jQuery.get(url, [data], [callback], [type])

参数：
url:待载入页面的URL地址 
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

$.get("/ajax_test/user/queryAll",function(data){
    for (var i = 0; i < data.length; i++) {
        $("#showAll").append("id: "+data[i].id
            +" name: "+data[i].name
            +" bir:"+data[i].bir+"<br/>");  
    }
},"JSON");

jQuery.post(url, [data], [callback], [type])

    参数：
    url:发送请求地址。
    data:待发送 Key/value 参数。
    callback:发送成功时回调函数。
    type:返回内容格式，xml, html, script, json, text, _default。

$.post("/ajax_test/user/queryAll",function(data){
    for (var i = 0; i < data.length; i++) {
        $("#showAll").append("id: "+data[i].id
            +" name: "+data[i].name
            +" bir:"+data[i].bir+"<br/>");  
    }
},"JSON");

jQuery.getJSON(url, [data], [callback])

参数：
url:发送请求地址。
data:待发送 Key/value 参数。
callback:载入成功时回调函数。

$.getJSON("/ajax_test/user/queryAll",function(data){
    for (var i = 0; i < data.length; i++) {
        $("#showAll").append("id: "+data[i].id
            +" age:"+data[i].age
            +" bir:"+data[i].bir+"<br/>");  
    }
},"JSON");

---

• Ajax传递数据时可不可以使用作用域传递数据？

  一定不可以。Ajax只认识：字符串和xml。

• Ajax只能发送异步请求？

  Ajax可以发送同步请求。

  $.ajax()方法中有async属性，(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

---

附上jQuery实现省市县三级联动源码：
源码