Ajax

Ajax

• 是什么?

“Asynchronous Javascript And XML”（异步JavaScript和XML），

并不是新的技术，只是把原有的技术，整合到一起而已。

1.使用CSS和XHTML来表示。
2.使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。

• 有什么用?

咱们的网页如果想要刷新局部内容。 那么需要重新载入整个网页。用户体验不是很好。 就是为了解决局部刷新的问题。 保持其他部分不动，只刷新某些地方。

数据请求 Get

创建ajax请求对象

function  ajaxFunction(){
	    var xmlHttp;
	    try{ // Firefox, Chrome, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
	        try{// Internet Explorer（高版本）
	            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	        }
	        catch (e){
	            try{// Internet Explorer（低版本）
	                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	            }
	            catch (e){}
	        }
	    }
	    return xmlHttp;
	}

发送请求

//执行get请求
function get() {

    //1. 创建xmlhttprequest 对象
    var request = ajaxFunction();

    //2. 发送请求。
    /*	
	 *	参数一： 请求类型  GET or  POST
	 *	参数二： 请求的路径
	 *	参数三： 是否异步， true  or false
	 */
    request.open("GET" ,"TestServlet" ,true );
    request.send();
}



// 如果发送请求的同时，还想获取数据，那么代码如下

//执行get请求
function get() {

    //1. 创建xmlhttprequest 对象
    var request = ajaxFunction();

    //2. 设置请求参数
    request.open("GET" ,"TestServlet?name=aa&age=18" ,true );

    //3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
    request.onreadystatechange = function(){
        // readyState的值一共有5个状态，参见下表
        // readyState == 4 表示请求已经完成， 再判断状态码是否是200，200表示服务端正常响应(没有报错)
        if(request.readyState == 4 && request.status == 200){
            //弹出响应的信息
            alert(request.responseText);
        }
    }
    
    // 4. 发送请求
    request.send();
}

XMLHttpRequest readyState状态表

值	状态	描述
0	UNSENT	代理被创建，但尚未调用 open() 方法。
1	OPENED	open() 方法已经被调用。
2	HEADERS_RECEIVED	send() 方法已经被调用，并且头部和状态已经可获得。
3	LOADING	请求中； responseText 属性已经包含部分数据。
4	DONE	请求完成。

数据请求 Post

<script type="text/javascript">
	//1. 创建对象
	// 和get请求一样
	
	function post() {
		//1. 创建请求对象
		var request = ajaxFunction();
		
		// 2. 设置请求地址、参数、类型(post、get)
		request.open("post", "StudentServlet", true);
		
		//3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
	    request.onreadystatechange = function(){
	        //前半段表示 已经能够正常处理。  再判断状态码是否是200
	        if(request.readyState == 4 && request.status == 200){
	            //弹出响应的信息
	            console.log("请求完成");
	            var h1 = document.getElementById("h1");
	        	h1.innerHTML = request.responseText;
	        }
	    }
		
	 	// 4. 如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
		request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		
		// 5. 发送请求
    	// 如果是GET请求，参数写在这里是无效的
		request.send("id=555");
	}

</script>

JQuery Ajax

底层ajax写法

// 语法：$.ajax(url, [settings]);

$.ajax("TestServlet", {
    type: "GET",
    data: {
        action: "json",
        uname: "zhangsan"
    },
    dataType: "json",
    success: function(data, status_text){
        console.log(data);
        console.log("status_text: " + status_text);
    },
    error: function(xhr, textStatus, errorThrow) {
        console.log("请求失败");
    }
});

$.ajax方法是其他所有ajax相关方法的底层实现，其他方法都是在它的基础上给我们封装的更方便使用的方法。关于$.ajax的详细介绍参见 http://jquery.cuishifeng.cn/jQuery.Ajax.html

get请求

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

$.get( "url",{pid:pid} ,function(data,status_text){
    console.log(data);
    console.log("status_text: " + status_text);
},"json" );	// 指定请求返回的格式是json，jquery会帮我们把服务端返回的json字符串转换成js的json对象

post请求

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

$.post( "url",{pid:pid} ,function(data,status){
    console.log(data);
    console.log("status_text: " + status_text);
},"json" );	// 指定请求返回的格式是json，jquery会帮我们把服务端返回的json字符串转换成js的json对象

获取JSON数据专用方法

$.getJSON("url", {id:1, name: "zhangsan"} function(json){
  console.log(json);
});

服务器和客户端数据传输的方式

xml

因为无效数据占比太大，阅读困难。基本已经被json格式淘汰掉了

  	<list>
        <city>
        <id>1<id>
        <pid>1</pid>
        <cname>深圳</cname>
        </city>
        <city >
        <id>2<id>
        <pid>1</pid>
        <cname>东莞</cname>
        </city>
    </list>

json

阅读性更好 、 占用空间更小。

[{city:{id:1, pid:1, cname:"深圳"}}, {city:{id:2, pid:1, cname:"东莞"}}]

fastjson库

JSON.toJSONString();	// 将JavaBean encode成 json string
JSON.parseObject();		// 将json对象decode成javabean
JSON.parseArray();		// 将json数组decode成java List或 JSONArray类型

练习案例 校验用户名是否可用

需求分析

• 页面

    <table border="1" width="500">
    	<tr>
    		<td>用户名:</td>
    		<td><input type="text" name="name" id="name"  onblur="checkUserName()"><span id="span01"></span></td> 
    	</tr>
    	<tr>
    		<td>密码</td>
    		<td><input type="text" name=""></td>
    	</tr>
    	<tr>
    		<td>邮箱</td>
    		<td><input type="text" name=""></td>
    	</tr>
    	<tr>
    		<td>简介</td>
    		<td><input type="text" name=""></td>
    	</tr>
    	<tr>
    		<td colspan="2"><input type="submit" value="注册"></td>
    	</tr>
  

• 需求描述
  实现用户注册时，在页面不跳转的情况下。提示用户输入的用户名是否已经存在。如果不存在显示正常状态；如果已经存在提示用户此用户名已经被占用。全程页面不能发生跳转。

案例练习二 使用Ajax技术实现省市联动

需求分析

• 页面

省份: -请选择 - 广东 湖南 湖北 四川

城市: 

<select name="city" id="city">
<option value="" >-请选择 -
</select>

• 需求分析

实现用户选择了一个省份以后，动态从后台查询该省份有哪些地市。 用户只能选择该省份所属的地市。 全程页面无刷新

js代码

$(function() {
    //1。找到省份的元素
    $("#province").change(function() {
        //2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
        //$("#province").varl();
        var pid = $(this).val();

        /*[
        {
        "cname": "深圳",
        "id": 1,
        "pid": 1
        },
        {
        "cname": "东莞",
        "id": 2,
        "pid": 1
        }
        ...
        ]*/
        $.post( "CityServlet02",{pid:pid} ,function(data,status){
            //先清空
            $("#city").html("<option value='' >-请选择-");
            //再遍历，追加
            $(data).each(function(index , c) {
                $("#city").append("<option value='"+c.id+"' >"+c.cname)
            });
        },"json" );
	});
});

总结

Ajax

* 创建请求对象

* 发送get请求

* 发送post请求

JQuery

发送get请求

发送post请求

​

服务器返回json数据