神奇的Ajax.

最新推荐文章于 2024-07-19 23:56:27 发布

对太阳心动

最新推荐文章于 2024-07-19 23:56:27 发布

阅读量1.8k

点赞数 3

文章标签： eclipse java tomcat java-ee jar

本文链接：https://blog.csdn.net/weixin_62026595/article/details/124413586

版权

Ajax：只刷新局部页面的技术.

JavaScript：更新局部的网页

XML：一般用于请求数据和响应数据的封装

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

异步：发送请求后不等返回结果，由回调函数处理结果

JavaScript对象XMLHttpRequest是整个Ajax技术的核心，它提供了异步发送请求的能力 .

常用属性:

onreadystatechange：指定回调函数

readystate: XMLHttpRequest的状态信息

0:XMLHttpRequest对象没有完成初始化

1:XMLHttpRequest对象开始发送请求

2:XMLHttpRequest对象的请求发送完成

3:XMLHttpRequest对象开始读取响应，还没有结束

4:XMLHttpRequest对象读取响应结束

常用属性

status：HTTP的状态码

状态码 · 说明

200 服务器响应正常

400 无法找到请求的资源

403 没有访问权限

404 访问的资源不存在

500 服务器内部错误

responseText：获得响应的文本内容

responseXML：获得响应的XML文档对象

注意：就绪状态是4而且状态码是200，才可以处理服务器数据

代码实操：

login界面：从html标签开始

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
   function login() {
       //接收用户名
       var uname = document.getElementById("uname").value;
       var upwd = document.getElementById("upwd").value;
       //声明一个xmlhttpRequest对象
       var xmlhttp;
       try{
           xmlhttp=new ActiveObject("Microsoft.XMLHTTP");
       }
       catch(e){
           xmlhttp=new XMLHttpRequest();
       }
       //连接服务器
       xmlhttp.open("post","LoginServlet",true);

       //设置请求头信息
       xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       //设置回调函数
       xmlhttp.onreadystatechange=function(){
           //判断请求响应结束
           if(xmlhttp.readyState==4){
               //服务器正常
               if(xmlhttp.status==200){
                   //接收响应的数据
                   var str = xmlhttp.responseText;
                   if(str=="ok"){
                       document.getElementById("sp").innerHTML="✔";
                   }else{
                       document.getElementById("sp").innerHTML="×";
                   }
               }
           }
       }
       //发送
       xmlhttp.send(null);
   }

</script>
</head>
<body>
<form action="">
       用户名：<input type="text" id="uname"><br>
       密码：<input type="password" id="upwd" οnblur="login()"><br>
       <span id="sp"></span>
       <input type="submit" value="登录">
       <input type="reset" value="重置">
</form>
</body>
</html>

LoginServlet java代码

package com.zking.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
   private static final long serialVersionUID = 1L;

   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("来了老弟");
       //接收数据
       String uname = request.getParameter("uname");
       String upwd = request.getParameter("upwd");

       response.setCharacterEncoding("utf-8");

       //获取响应的输出流
       PrintWriter out = response.getWriter();

       if("。。。".equals(uname) && "。。。".equals(upwd)) {
           out.print("ok");
       }else {
           out.print("no");
       }
       out.close();




   }


   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       // TODO Auto-generated method stub
       doGet(request, response);
   }

}

一个简单的应用就OK了。

我们简化了，就是可以写dao方法判断，我们只是用自己写的数据判断的。

对太阳心动

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
神奇的Ajax.

Ajax：只刷新局部页面的技术.JavaScript：更新局部的网页XML：一般用于请求数据和响应数据的封装XMLHttpRequest对象：发送请求到服务器并获得返回结果异步：发送请求后不等返回结果，由回调函数处理结果JavaScript对象XMLHttpRequest是整个Ajax技术的核心，它提供了异步发送请求的能力 .常用属性:onreadystatechange：指定回调函数readystate: XMLHttpRequest的状态信息0:XMLHttpReq.
复制链接

扫一扫