本文已参与[新人创作礼]活动，一起开启掘金创作之路。
哈喽，大家好！我是Why，一名在读学生，目前刚刚开始进入自己的编程学习生涯。虽然学习起步较晚，但我坚信做了才有0或1的可能。学了一段时间以后也是选择在掘金上分享自己的日常笔记，也希望能够在众多道友的大家庭中打成一片。 本文主要讲解Ajax，如果大家读后觉得有用的话，还请大家多多支持博主：欢迎 ❤️点赞👍、收藏⭐、留言💬 ✨✨✨个人主页：JinHuan
Ajax
什么是Ajax
Ajax是一种在无需重新加载整个网页的情况下的能够对浏览器当前展示的部分界面内容进行更新的方法，该技术不单单需要前端的技术，还需要后端的服务器提供数据，'该数据是Ajax的相应结果'
主要使用的技术有：
JavaScript,Html,Css,Dom,XML等，现在主要是JavaScript和JSON配合使用
JavaScript：使用脚本对象XMLHttpRequest来发送请求，接收相应数据
JSON：发送和接收的数据格式
Ajax实现异步刷新的步骤
1、创建异步请求对象 XMLHttpRequest
var xmlHttpRequest = new XMLHttpRequest();
异步请求对象的属性：
a)readystate属性:
一个JS函数名（或者直接定义函数），每当readyState属性进行变化的时候，就会自动调用该函数
b)readyState属性:
存有XMLHttpRequest的状态：从0到4
'0:'请求初始化：
创建异步请求对象 var XMLHttpRequest = new XMLHttpRequest();
'1:'初始化异步请求对象：
xmlHttpRequest.open(请求方式,请求地址,true);
'2:'异步请求对象发送请求
xmlHttpRequest.send();
'3:'异步对象接收应答数据，从服务端返回数据，XMLHttpRequest内部进行处理
'4:'异步对象将数据解析完毕/*此时才可以读取数据*/
c)status属性：
200：“代表数据已接收处理完全”
404：未找到界面
2、onreadstatechange事件
当请求被发送到服务器的时候，需要执行一些基于相应的任务，每当readstate改变的时候，就会触发onreadystatechange事件，'该事件可以指定一个处理函数function()'
通过判断XMLHttpRequest对象的状态的，获取服务端返回的数据
3、初始化请求参数
方法：
open(method,url,async): 初始化异步请求对象
参数说明：
method：
请求的类型：GET或POST
url:
服务器的servlet地址
async:
true-->异步
false-->同步
例如：xmlHttpServlet.open("get","URL",true);
4、发送请求
xmlHttp.send();
5、接收服务器相应的数据
如需获得来自服务器的'响应'，要使用XMLHttpRequest对象的'responseText或responseXML'
responseText：获取字符串形式的相应数据
responseXML：获取XML形式的响应数据
使用Ajax和JSON实现异步刷新
servlet
package com.jinhuan.controller;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.jinhuan.dao.ProvinceDao;
import com.jinhuan.entity.Province;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class AjaxServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1、获取请求参数
String id = request.getParameter("id");
String json = "{}";
//2、调用Dao对象进行处理
Province province = new ProvinceDao().search(Integer.parseInt(id));
//JSON工具包的使用-->将一个对象转换为一个JSON类型的字符串
ObjectMapper obj = new ObjectMapper();
json = obj.writeValueAsString(province);
//此时传递数据
response.setContentType("application/json;charset=utf-8");
PrintWriter writer = response.getWriter();
writer.println(json);
writer.flush();
writer.close();
}
}
JSP
<%--
Created by IntelliJ IDEA.
User: 尽欢
Date: 2021/11/26
Time: 18:57
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Ajax联合JSON实现异步更新</title>
</head>
<script type="text/javascript">
function dosearch() {
//1、获取异步请求对象
var xmlRequest = new XMLHttpRequest();
//2、onreadyStateChange事件
xmlRequest.onreadystatechange = function () {
if (xmlRequest.readyState == 4 && xmlRequest.status == 200){
//处理更新结果
var objJson = xmlRequest.responseText;
var ans = eval("("+ objJson +")");
deal(ans);
}
}
//3、获取参数信息
var parm = "id="+document.getElementById("id").value;
xmlRequest.open("get","ajax?"+parm,true);
//4、发送请求
xmlRequest.send();
function deal(json){
document.getElementById("name").value = json.name;
document.getElementById("jiancheng").value=json.jiancheng;
document.getElementById("shenghui").value= json.shenghui;
}
}
</script>
<body>
<center>
<p>请输入需要查询的省份ID</p>
<table>
<tr>
<td>省份ID <input type="text" id = "id"/></td>
<td><input type="button" value="查询" onclick="dosearch()"/></td>
</tr>
<tr>
<%--设置readonly属性--%>
<td>省份名称<input type="text" id = "name"/></td>
</tr>
<tr>
<td>省份简写<input type="text" id = "jiancheng"/></td>
</tr>
<tr>
<td> 省会  <input type="text" id = "shenghui"/></td>
</tr>
</table>
</center>
</body>
</html>
好了，关于AJax的讲解就到这里了，下一篇讲解JQuery,敬请期待！
