JAVA WEB 11 AJAX

最新推荐文章于 2023-07-09 15:51:31 发布

无梦想，却时常幻想

最新推荐文章于 2023-07-09 15:51:31 发布

阅读量569

点赞数

文章标签： ajax java post json

本文链接：https://blog.csdn.net/weixin_46147057/article/details/108452766

版权

JAVA WEB 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Ajax

Asynchronous JavaScript And Xml(Json)
异步的JS交互技术
异步请求，局部刷新

操作步骤

在这里插入图片描述

创建XMlHttpRequest

在这里插入图片描述

回调函数属性

在这里插入图片描述

打开连接，发送请求

在这里插入图片描述
xhr.open默认打开异步请求，可让其async(异步的)属性为false，设为同步请求。此属性默认为ture

xhr.open("post","${pageContext.request.contextPath}/ajax",false);

同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事(阻塞)
异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕
a标签， location，表单提交并不是同步请求，不会阻塞，在响应前仍可以对页面进行操作
ajax 设置async属性为false，此时ajax发送的请求时同步，阻塞，游览器页面禁止操作

响应内容获取

在这里插入图片描述

AJAX简单实例

在这里插入图片描述

请求界面，传输方式get 使用JS提交表单

<body>
  用户名<input type="text" id="name"><span id="info"></span><br>
  <button  onclick="sendAjax()">登录</button>
  </body>
  <script>
    function sendAjax() {
      // 1.核心对象 发送异步请求 处理请求响应
      if (window.ActiveXObject){
        // IE内核 IE游览器
        var xhr = new ActiveXObject("Microsoft.XML.HTTP");
      }else {
        // webkit内核 Chrome ，Safari，Opera，IE7以上
        var xhr = new XMLHttpRequest();
      }
      // 2.初始化参数 请求方式 ，请求地址，请求参数
      xhr.open("get","${pageContext.request.contextPath}/ajax?username="+document.getElementById("name").value)
      // 3.发送
      xhr.send();
      // 4.接收响应
      // xhr.readyState  0=未初始化  1=初始化   2=已发送  3=开始接收到响应  4=响应的所有内容接收完毕 status：200响应成功
      xhr.onreadystatechange=function () {
        if (xhr.readyState == 4&&xhr.status==200){
          var text = xhr.responseText;
          document.getElementById("info").innerHTML=text;
        }
      }
      // 另一种方法，
       xhr.onload=function(){
       		document.getElementById("info").innerHTML=text;
       }

接收表单的Servlet

request.setCharacterEncoding("utf-8");
	String username = request.getParameter("username");
	System.out.println(username);
	response.setContentType("text/html;charset=utf-8");
	if ("admin".equals(username)){
	    response.getWriter().write("用户名重复");
	}else {
	    response.getWriter().write("用户名可用");
	}

使用post方式提交，

 // 2.初始化参数 请求方式 ，请求地址，请求参数
xhr.open("post","${pageContext.request.contextPath}/ajax");
// 设置请求头，告知游览器发送的是键值对
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
// 3.发送，要提交的数据作为send的参数
xhr.send("username=admin");

JSON

[ ] 表示数组 { } 表示对象
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串
值中不可包含小写字母

客户端JSON处理

阿里的Fastjson中JSON工具类
控制不序列化某些属性:
@JSONField(serialzale=false)

List<User> list = Arrays.asList(new User(1,"chichi",18),new User(2,"yyds",15));
// 对象数组转换为JSON字符串
String users = JSON.toJSONString(list);
System.out.println(users);
// parseObject() 将JSON字符串转成对象
// parseArray() 将JSON字符串转数组JSONArray
JSONArray objects = JSON.parseArray(users);
// 可直接换为对应泛型集合
List<User> list1 = JSON.parseArray(users, User.class);
for (Object object : objects) {
    System.out.println((User)object);
}

游览器处理JSON

服务器传来的是字符串，在使用前要先解析

JSON.stringify():把JS对象转成JSON字符串。
JSON.parse():把JSON字符串解析成JS对象。

在这里插入图片描述

无梦想，却时常幻想

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVA WEB 11 AJAX

异步请求，局部刷新AJAX简单实例请求界面，使用JS提交表单<body> 用户名<input type="text" id="name"><span id="info"></span><br> <button onclick="sendAjax()">登录</button> </body> <script> function sendAjax() { //
复制链接

扫一扫