Java Web之Ajax

一、简介

1、Ajax的概念

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。

2、Ajax的特点

• Ajax 是一种用于创建快速动态网页的技术。
• Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
• Ajax可以更好的提升用户体验。

3、同步请求和异步请求

• 同步请求：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
• 异步请求：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

二、实现方式

1、原生的JS实现方式

function  fun() {
    //1.创建核心对象
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    //2. 建立连接
    /*
        参数：
            1. 请求方式：GET、POST
                * get方式，请求参数在URL后边拼接。send方法为空参
                * post方式，请求参数在send方法中定义
            2. 请求的URL：
            3. 同步或异步请求：true（异步）或 false（同步）
     */
    xmlhttp.open("POST","ajaxServlet",true);

    //3.发送请求
    xmlhttp.send("username=tom");

    //4.接受并处理来自服务器的响应结果
    xmlhttp.onreadystatechange=function()
    {
        //判断readyState就绪状态是否为4，判断status响应状态码是否为200
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            //获取服务器的响应结果
            var responseText = xmlhttp.responseText;
            alert(responseText);
        }
    }
}

2、JQeury实现方式

2.1、 $.ajax({键值对})

//使用$.ajax()发送异步请求
function  fun() {
	$.ajax({
		url:"ajaxServlet1111" , // 请求路径
		type:"POST" , //请求方式
		data:{"username":"jack","age":23},//请求参数
		success:function (data) { //响应成功后的回调函数
			alert(data);
		},
		error:function () {
			alert("出错啦...")
		},
		dataType:"text"//设置接受到的响应数据的格式
	});
}

2.2、$.get()：发送get请求

//使用$.get()发送异步请求
function  fun() {
	$.get("ajaxServlet",{username:"rose"},function (data) {
		alert(data);
	},"text");
}

2.3、$.post()：发送post请求

//使用$.get()发送异步请求
function  fun() {
	$.post("ajaxServlet",{username:"rose"},function (data) {
		alert(data);
	},"text");
}