ajax学习

ajax学习

• 是什么？

“Asynchronous Javascript And XML”（异步JavaScript和XML），
并不是新的技术，只是把原有的技术，整合到一起而已。

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

• 有什么用?

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

• 适应场景
  当我们向输入框输入字符时，ajax把输入的字符发送给了百度服务器百度服务器返回搜索候选项目
  
  注册账号验重
  当我们输入用户名时，页面通过ajax把用户名发送给服务器，服务器返回用户名是否重复

原生Ajax

数据请求get或post

创建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请求

//执行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. 设置请求参数（区别于post请求，get请求的参数是直接拼到地址中）
    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类型

json的好处

在项目中导入jar包

fastjson-1.2.58.jar

创建一个实体类比如下面

/**
 *  通用响应数据对象
 * @author
 *
 */
public class ResponseInfo {
	private Integer code;
	private String msg;

	public ResponseInfo() {
	}

	public ResponseInfo(Integer code) {
		this.code = code;
	}

	public ResponseInfo(Integer code, String msg) {
		this.code = code;
		this.msg = msg;
	}

	public Integer getCode() {
		return code;
	}

	public void setCode(Integer code) {
		this.code = code;
	}

	public String getMsg() {
		return msg;
	}

	public void setMsg(String msg) {
		this.msg = msg;
	}
}

创建测试类

import com.alibaba.fastjson.JSON;
import com.lanou.bean.ResponseInfo;

public class TestJson {
	public static void main(String[] args) {
		ResponseInfo info = new ResponseInfo(200,"请求成功");
		System.out.println("info:"+info);
		String jsonStr = JSON.toJSONString(info);
		System.out.println("将对象转成json字符串：" + jsonStr);
		String str = "{\'code\':200,\"msg\":\"请求成功\"}";
		ResponseInfo info2 = JSON.parseObject(str, ResponseInfo.class);
		System.out.println("info2:"+info2);
		System.out.println(info2.getMsg());
	}
}

可以把请求回来的数据存入Java对象，Java对象可以和json数据来回转化，通过json把数据传到前台，这一眼就能看出来数据是什么