Ajax异步交互

学习目标：

掌握Ajax

---

学习内容：

1、 简介 2、 XMLHttpRequest 3、 Get和Post 4、 JSON

---

学习时间：

1、２０２１年１０月２６日 2、 ２０２１年１０月２８日

---

学习产出：

1、 技术笔记 １ 遍 2、登录界面１份

Ajax简介

Ajax 全称为：“Asynchronous JavaScript and XML”（异步JavaScript 和 XML）,

使用Ajax我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验

Ajax其实质是利用浏览器提供的一个特殊的对象（XMLHttpRequest）异步的向服务器发送请求,服务器返回部分数据，浏览器让你去利用这些数据对页面做部分的更新，整个过程，页面无刷新，不打断用户的操作。

创建XMLHttpRequest对象

XMLHttpRequest对象：发送请求到服务器并获得返回结果

所有现代浏览器都内建了XMLHttpRequest对象

​ new XMLHttpRequest();

XMLHttpRequest

JavaScript对象XMLHttpRequest是整个Ajax技术的核心，它提供了异步

发送请求的能力 。

常用方法：

常用属性：

​ • onreadystatechange：事件，指定回调函数

​ • readystate: XMLHttpRequest的状态信息

​ • status：HTTP的状态码

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

Get方式/Post方式

Get方式提交：

​ xmlhttp.open(“GET”,“testServlet?name=”+userName,true); xmlhttp.send(null);

Post方式提交 ：

​ xmlhttp.open(“POST”,“testServlet”,true);

POST方式需要自己设置http的请求头

​ xmlhttp.setRequestHeader(“Content-Type”,“application/x- www-form-urlencoded”);

POST方式发送数据

​ xmlhttp.send(“name=”+userName);

JSON

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

​ 数据在键值对中

​ 数据由逗号分隔

​ 大括号保存对象

​ 方括号保存数组

语法

JSON 键值对是用来保存 JS 对象的一种方式，和 JS 对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号 “” 包裹，使用冒号 : 分隔，然后紧接着值：

{“firstName”: “John”}

{“name”:”value”,”sex”:”男”}

Java对象转JSON

在异步交换数据时，java对象不能直接被传递给js,所以需要先把java对

象转换为JSON格式字符串，把字符串响应给客户端，再由客户端将

JSON字符串转换为js对象即可（ $.parseJSON(jsonstr) ）。

	Gson gson = new Gson();
    String s = gson.toJson(user);
    out.println(s);	

	var obj = $.parseJSON(res);//json字符串转为js对象

Jquery实现AJAX-$.get()

$.get()是一个简单的 GET 请求功能。请求成功时可调用回调函数。

$.get(url,[data],[callback],[type])

​ url:发送请求地址。

​ data:待发送 Key/value 参数。

​ callback:发送成功时回调函数。

​ type:返回内容格式，xml, html, script, json, text, _default

注意：请求是通过 URL 提交的

提交有大小限制（2KB）

			//  url               data                 回调函数	
		$.get("../student",$("#formId").serialize(),function(res){
                
            },"json");//返回内容格式

Jquery实现AJAX-$.post()

这是一个简单的 POST 请求功能。请求成功时可调用回调函数

$.post(url,[data],[callback],[type])

​ url:发送请求地址。

​ data:待发送 Key/value 参数。

​ callback:发送成功时回调函数。

​ type:返回内容格式，xml, html, script, json, text, _default

POST 请求是 HTTP 消息实体提交的，提交大小不受限制

$("#testform").serialize() 请求发送表单数据

	      //  url               data                 回调函数	
	$.post("../student",$("#formId").serialize(),function(res){
            
        },"json");//返回内容格式