用于构建快速动态网页的异步数据传输技术：Ajax

基础知识

AJAX

• AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。
• AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
• Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
  • 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。
  • 这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
  • 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

异步和同步

• 同步
  • 客户端和服务器端相互通信的基础上，客户端必须等待服务器端的响应。
  • 在等待的期间客户端不能做其他操作。
• 异步
  • 客户端和服务器端相互通信的基础上，客户端不需要等待服务器端的响应。
  • 在服务器处理请求的过程中，客户端可以进行其他的操作。

实现方式

JS实现方式（了解）

• 如果没有 jQuery，AJAX 编程还是有些难度的。

/* 发送异步请求 */

// 1.创建对象
    var xmlhttp;
    if (window.XMLHttpRequest){
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }else{
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
// 2.建立连接
//  * 请求方式：GET/POST
//  * 请求的URL
//  * 同步或异步请求：true（异步）、false（同步）
	xmlhttp.open("GET","/ajaxServlet?fname=Henry&lname=Ford",true);
// 3.发送请求
	xmlhttp.send();
    //  POST方式
    // xmlhttp.open("POST","/ajaxServlet",true);
    // xmlhttp.send("fname=Henry&lname=Ford");
// 4.接受并处理来自服务器的相应结果
//  判断服务器是否成功响应
	xmlhttp.onreadystatechange=function(){
    // readyState：就绪状态
    // status：响应状态码
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        // responseText：响应结果
        var responseText = xmlhttp.responseText;
        alert(responseText);
	}
}

JQeury实现方式

• 通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON
• 同时能够把这些外部数据直接载入网页的被选元素中。

$.ajax()

 $.ajax({
    // url：请求路径
    url:"/ajaxServlet",
    // type：请求方式
    type:"POST",
    // data：请求参数
    // data:"fname=Henry&lname=Ford",
    data:{"fname":"Henry","lname":"Ford"}, // Json方式
	// success：响应成功后的回调函数
            success:function (responseData) {
                alert(responseData);
	},
	// error：响应错误后的回调函数
	error:function () {
                alert("出错了!");
            },
            // dateType：设置接受到的响应数据的格式
            dataType:"text"
	});

$.get()

 $.get(
    // url：请求路径
    "/ajaxServlet",
    // data：请求参数
    {"fname":"Henry","lname":"Ford"},
    // success：响应成功后的回调函数
    function(data,status){
    	alert("数据: " + data + "\n状态: " + status);
    },
    // dateType：设置接受到的响应数据的格式
    "text"
}

$.post()

$.post(
    // url：请求路径
    "/ajaxServlet",
    // data：请求参数
    {"fname":"Henry","lname":"Ford"},
    // success：响应成功后的回调函数
    function(data,status){
    	alert("数据: " + data + "\n状态: " + status);
    },
    // dateType：设置接受到的响应数据的格式
    "text"
}