AJAX

一.AJAX的概述

1. 什么是AJAX

使用AJax可以做异步的请求,实现局部刷新.

2.什么是异步

• 同步
  
• 异步
  

3. 为什么要学习AJAX

提升用户的体验。(异步)

实现页面局部刷新。

将部分的代码，写到客户端浏览器。

二.JS的Ajax入门

1.需求:

在网页上点击按钮, 发送Ajax请求服务器,响应hello world

2.步骤

第一步：创建异步请求对象。

第二步：打开连接。

第三步：发送请求。

第四步：设置监听对象改变所触发的函数,处理结果

3.1GET请求方式的入门

<script>
		function ajaxDemo() {
			//1.创建xmlHttpRequest对象
			var xmlHttp = null;
			if (window.XMLHttpRequest) {// all modern browsers
				xmlHttp = new XMLHttpRequest();
			} else if (window.ActiveXObject) {// for IE5, IE6
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
		
			//2.打开连接
			xmlHttp.open("GET","${pageContext.request.contextPath}/demo02?username=zs&password=123456");
			//3.发送请求
			xmlHttp.send();
  
  			//4.设置对象状态发生改变所触发的函数
			xmlHttp.onreadystatechange = function(){
				if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
					var result = xmlHttp.responseText;
					alert(result);
				}
				
			};

		}
	</script>

3.2POST请求方式的入门

<script>
	function ajaxDemo() {
		//1.创建xmlHttpRequest对象
		var xmlHttp = null;
		if (window.XMLHttpRequest) {// all modern browsers
			xmlHttp = new XMLHttpRequest();
		} else if (window.ActiveXObject) {// for IE5, IE6
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	
		//2.打开连接
		xmlHttp.open("POST", "${pageContext.request.contextPath}/demo03");
		//设置请求参数的mime类型
		xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
		//3.发送请求
		xmlHttp.send("username=zs&password=123456");
	
  		//4.设置状态发生改变触发的函数,处理结果
		xmlHttp.onreadystatechange = function() {
			if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
				var result = xmlHttp.responseText;
				alert(result);
			}
		};
  
	}

	
</script>

4.涉及到的API

• XMLHttpRequest

  不同的浏览器对该对象的创建的方式不一样，MSIE浏览器，比较早的浏览器，创建这个对象的时候将这个对象封装到ActiveXObject的插件中。像火狐或者谷歌浏览器则直接new出来。

function createXmlHttp(){
   var xmlHttp;
   try{ // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
   }catch (e){
	   try{// Internet Explorer
	         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	      }
	    catch (e){
	      try{
	         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	      }
	      catch (e){}
	      }
    }
	return xmlHttp;
 }

• XMLHttpRequest的对象的API

• 方法

  open() ：打开连接。传递三个参数。第一个是请求方式(GET/POST)，第二个是请求路径，第三个是否是异步的(默认就是异步,不需要这个参数)。

  send([post请求的参数]): 发送请求。

  setRequestHeader()：解决POST请求参数的问题。 key和值 content-type

• 属性

  onreadystatechange：监听该对象的状态的改变,需要一个函数响应它

  readyState：该属性就记录这个对象的状态。
  
  status：状态码 。

  responseText:获得字符串形式的响应数据(响应体)。

  responseXML :获得 XML 形式的响应数据(响应体)

三.JQ的AJAX

1. 为什么要使用JQuery的AJAX

因为传统(js里面)的AJAX的开发中，AJAX有两个主要的问题：

• 浏览器的兼容的问题 , 编写AJAX的代码太麻烦而且很多都是雷同的。

• 在实际的开发通常使用JQuery的Ajax 或者 vue里面的axios

2.2JQuery的Ajax的API

请求方式	语法
GET请求	$.get(url, [data], [callback], [type])
POST请求	$.post(url, [data], [callback], [type])
AJAX请求	$.ajax([settings])
GET请求(3.0新特性)	$.get([settings])
POST请求(3.0新特性)	$.post([settings])

四.JQ的AJAX入门

1.get()

get方式, 语法 $.get(url, [data], [callback], [type]);

参数名称	解释
url	请求的服务器端url地址
data	发送给服务器端的请求参数，格式可以是key=value，也可以是js对象
callback	当请求成功后的回掉函数，可以在函数体中编写我们的逻辑代码
type	预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等

$("#btn1").click(function(){
  		//发送请求; $.get(url,[params],[function(result){}])

  		$.get("{pageContext.request.contextPath }/demo01",		{"username":"zs","password":"123456"},function(result){	
  			alert(result);

  		});

  	});

2. post()

• post方式, 语法 $.post(url, [data], [callback], [type])

参数名称	解释
url	请求的服务器端url地址
data	发送给服务器端的请求参数，格式可以是key=value，也可以是js对象
callback	当请求成功后的回掉函数，可以在函数体中编写我们的逻辑代码
type	预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等

  	$("#btn2").click(function(){

  		//发送请求; $.post(url,[params],[function(result){}])

  		$.post("{pageContext.request.contextPath }/demo01",{"username":"zs","password":"123456"},function(result){

  			alert(result);

  		});

  	});

3.ajax()

• 语法 $.ajax([settings])
  其中，settings是一个js字面量形式的对象，格式是{name:value,name:value… …}，常用的name属性名如下

属性名称	解释
url	请求的服务器端url地址
async	(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false
data	发送到服务器的数据，可以是键值对形式，也可以是js对象形式
type	(默认: “GET”) 请求方式 (“POST” 或 “GET”)， 默认为 “GET”
dataType	预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等
success	请求成功后的回调函数
error	请求失败时调用此函数

function sendRequest(){
		$.ajax({
			url:"/AjaxDemo/ajaxServlet",
			async:true,
			data:"name=haohao&age=33",
			type:"GET",
			dataType:"text",
			success:function(data){
				alert(data);
			},
			error:function(){
				alert("数据没有成功返回!")
			}
		});
	}