Ajax 异步提交(XMLHttpRequest对象，GET方式、axios框架，json)

目录

一、Ajax简介

二、创建XMLHttpRequest对象

三、axios框架

四、Json

---

一、Ajax简介

1.使用Ajax可以无刷新更新页面实现异步提交，提升用户体验。

2.实质是用浏览器提供了一个特殊的对象(XMLHttpRequest)，异步的向服务器发送请求( 使用一个js提供的对象向后端发送请求，会被js对象接收，然后在js中，用接收到的内容局部更新网页，此过程整个页面不会更新)。

二、创建XMLHttpRequest对象

1.创建XMLHttpRequest对象

        发送请求到服务器并获得返回结果.

         var httpObj=new XMLHttpRequest();

2.常用方法和属性

2.1 常用方法：

        • open(method,URL,async)；

           建立与服务器的连接 ；

           method参数指定请求的HTTP方法,典型的值是GET 或POST ；

           URL参数指定请求的地址；

           async参数指定是否使用异步请求，其值为true或 false

        • send(content);

           发送请求；

           content参数指定请求的参数

        • setRequestHeader(header,value)；

           设置请求的头信息

2.2 属性

        • onreadystatechange：事件

        • readystate: XMLHttpRequest的状态信息

        • responseText：获得响应的文本内容

3.Get方式提交

<script type="text/javascript">
			function checkAccount(account){
			//location.assign("http://127.0.0.1:8080/webBack/reg?account="+account)
				var httpObj=new XMLHttpRequest();
				httpObj.open("GET","http://127.0.0.1:8080/webBack/reg?account="+account,true);
				httpObj.send();//发送请求
				
				//接收请求，匿名函数，直接被事件触发
				httpObj.onreadystatechange=function(){
					/* alert(httpObj.responseText); */
					document.getElementById("msgId").innerHTML=httpObj.responseText;//存在一个跨域问题，浏览器默认不让前端8848接收来自其他服务器的响应数据
				}
			
			}
		</script>

三、axios框架

● 下载axios文件https://unpkg.com/axios/dist/axios.min.js

● 导入项目：将文件导入到Hbuilder项目js文件下

● get请求

●post请求

<script src="js/axios.min.js"></script>
		<script type="text/javascript">
			function checkAccount(account){
				/* axios.get("http://127.0.0.1:8080/webBack/reg?account="+account).then(function(resp){
					//console.log(resp.data);//获取后端响应的数据，默认为json格式
					document.getElementById("msgId").innerHTML=resp.data;
				})	 */	
				
				axios.post("http://127.0.0.1:8080/webBack/reg","account="+account).then(function(resp){
					document.getElementById("msgId").innerHTML=resp.data;
				})
			}
		</script>

四、Json

1.JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.

●java代码

 protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String num=req.getParameter("num");
        Student student=new Student(num,"卡卡","女");
        //resp.getWriter().print(student);打印的是哈希值
        /*涉及了两种不同语言间进行数据交互，以前的Java将数据写到了一个xml文件中，把xml文件传给前端，前端解析，这很复杂；
        现在的交互中，产生了一种轻量级的数据格式{num:"num",name:卡卡,gender:女}*/

        ObjectMapper objectMapper=new ObjectMapper();
        String s=objectMapper.writeValueAsString(student);
        System.out.println(s);
        resp.getWriter().print(s);
    }

●HTML代码

<script src="js/axios.min.js"></script>
		<script type="text/javascript">
			function checkAccount(num){

				axios.post("http://127.0.0.1:8080/webBack/reg","num="+num).then(function(resp){
					console.log(resp.data.num);
					console.log(resp.data.name);
					console.log(resp.data.gender);
				})
			}
		</script>

浏览器控制台

Java控制台