WEB26_AJAX

Ajax全称:Asynchronous JavaScript and XML   异步的JS与XML

同步与异步:

这里通俗的理解就是:

同步的时候,做某件事的时候必须专心,不能干别的事情.

异步的时候,做某件事的同时你也可以做别的事情.什么时候去做那件事,都行.

Ajax的原理:

打个比方,就是代理的意思.本来某件事由你自己去做,现在你把事情交给另一个人,让他帮你完成,这期间你可以完成别的事情.

本来我们提交一个表单,,访问一个网站,传送一些数据,都是直接让我们的客户端去做这件事情,现在我们把这个事情交给Ajax去做,然后等着回信就行.

原始的Ajax:

步骤有五步;

1.获得ajax引擎对象:XMLHttpRequest

2.绑定监听:当事情做完了后就触发这个方法

3.绑定地址url:发送到那里,发送的方法,是否异步

4.发送请求

5.接收数据

<script type="text/javascript">
	function fn1(){
		//1.建立ajax引擎对象
		var httpx = new XMLHttpRequest();
		//2.绑定监听
		httpx.onreadystatechange = function() {
			if (httpx.readyState == 4 && httpx.status == 200) {
				//5.接收数据
				var text = httpx.responseText;
				document.getElementById("span1").innerHTML = text;
			}
		}
		//3.绑定地址   发送方法post    发送的服务器地址      是否异步 
		httpx.open("get", "${pageContext.request.contextPath}/ajax?name=zhangsan", true);
		//4.发送请求
		httpx.send();
		
		
	}
</script>

这里的第二步绑定监听中,还使用了状态值判断,其实在文档中有

JQ的AJAX:

注意:要先导入JQ需要的js文件

三个方法:get/post/ajax

get(url,[data],[fn],[type])

function fn1(){
		var value = {
			"key":"cat and mouse",
		}
		$.get("${pageContext.request.contextPath}/jqAjax",value,function(data){
			alert(data);
		},"text");
	}

post(url,[data],[fn],[type])

这里的post与get其实很相同

function fn2(){
		var value = {
				"key":"cat and mouse",
			}
			$.post("${pageContext.request.contextPath}/jqAjax",value,function(data){
				alert(data);
			},"text");
	}

本来在地址栏中,get是可以显示数据传送的,但是,现在把访问服务器交给了ajax引擎,导致地址栏上都不显示了.所以post与get差不多了

而这也正是ajax的一个缺点吧,违背的url资源定位的初衷了.

使用JSON对象接受数据

Type不同导致接受的类型不同

function fn1(){
		var value = {
			"key":"cat and mouse",
		}
		$.get("${pageContext.request.contextPath}/jqAjax",value,function(data){
			alert(data);
		},"text");
	}
function fn2(){
		var value = {
				"key":"cat and mouse",
			}
			$.post("${pageContext.request.contextPath}/jqAjax",value,function(data){
				alert(data);
			},"JSON");
	}

protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		String value = request.getParameter("key");
		System.out.println(value);
                //不可以使用'来代替",必须使用转义\
		response.getWriter().write("{\"name\":\"Tom\",\"age\":20}");
	}

这里的fn1方法接收到的是一个字符串,而fn2接收到的是一个JSON对象,我们可以通过data.name获取到Tom.

到现在,我们可以向JSP中传递一个对象了.

ajax([options])

前边的get与post的方法多少还有一些约束,比如无法修改同步异步,必须使用异步.

而这个ajax方法就是自己自定义的方法了.

这里只写几个常用的属性,其他请查文档

url:发送到哪里

type:post/get(default)  发送方法

dataType:xml/html/script/json/jsonp/text   接收数据的类型

success:请求成功后的回调函数

error:请求失败后的回调参数

async:同步还是异步(default  true)

data:发送到服务器的数据,建议使用JSON格式

function fn3(){
		var value = {
				"key":"cat"
		}
		$.ajax({
			url:"${pageContext.request.contextPath}/jqAjax",
			data:value,
			async:true,
			success:function(data){
				alert(data.name);
			},
			erroe:function(data){
				alert("失败的请求");
			},
			dataType:"json"
		});
	}