Java学习

Java之AJAX概念和实现方式

开发工具与关键技术：MyEclipse 10,java
作者：刘东标
撰写时间：2019-06-12

1．概念：

Asynchronous JavaScript And XML 异步的JavaScript和XML
1.异步和同步：客户端和服务端相互通信的基础上

     同步:  *客户端必须等待服务端的响应。在等待的期间客户端不能做其他操作。
     异步:  *客户端不需要等待服务端的响应。在服务器处理请求的过程中，客户端可以做其他操作。
     
      Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
      
      通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以不重新加载整个网页的情况下，
      对网页的某部分进行更新。传统的网页（不使用Ajax）如果需要更新内容，必须需重新整个网页页面。

提升用户的体验

2、实现方式：

1.原生的js实现方式
//定义方法

function fun() {
		//发送异步请求
		//1.创建核心对象
		var xmlhttp;
		//为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。
		//如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject
		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("GET","/BorrowAndInvest/servlet/LoginServlet?username=tom", true);
	//3.发送请求
	xmlhttp.send();
	//4.接受并处理来自服务器的响应结果
	//获取方式：xmlhttp.responseText;
	//什么时候获取？当服务器响应成功后再获取
	//当xmlhttp对象就绪状态改变时,触发事件onreadystatechange.
	xmlhttp.onreadystatechange = function() {
	   //判断readyState就绪状态是否为4，判断status响应状态码是否为200
		if (xmlhttp.readyState == 4 && xmlhttp.status==200) {
		    //获取服务器的响应结果
			var responseText= xmlhttp.responseText;
			alert(responseText);
		}
	}
}

2.Jquery实现方式

1.$.ajax()

      *语法:$.ajax({键值对})；
//定义方法



  function fun() {
    	//使用$.ajax()发送异步请求
    $.ajax({
    		   url:"/BorrowAndInvest/servlet/LoginServlet",//请求路径
    		   type:"POST",//请求方式
    		   //data:"username=hello&age=25",//请求参数
    		   data:{"username":"hello","age":25},
    		   success:function(data){
    		         alert(data);
    		   },//响应成功后的回调函数
    		   error:function(){
    		   alert("出错啦");
    		   },//表示如果请求响应出现错误，会执行的回调函数
    		   dataType:"text"//设置接收到的响应数据的格式
    		});
    	}

2.$.get()：发送get请求

*语法:$.get(url,[data],[callback],[type])
*参数：1.url:请求路径2.data:请求参数3.callback回调函数4.type:响应结果的类型

  function fun() {
    	$.get("/BorrowAndInvest/servlet/LoginServlet",{username:"大雄"},function(data){
    	          alert(data);
    	},"text");
    }

3.$.post()发送post请求*

	function fun() {
	$.post("/BorrowAndInvest/servlet/LoginServlet",{username:"大雄"},function(data){
	          alert(data);
	},"text");
}