简单认识XMLHttpRequest

最新推荐文章于 2023-06-17 17:18:13 发布

qq_35383788

最新推荐文章于 2023-06-17 17:18:13 发布

阅读量222

点赞数

文章标签： XMLHttpRequest

本文链接：https://blog.csdn.net/qq_35383788/article/details/99971378

版权

demo001.html

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <script type="text/javascript">
       //首先，新建一个XMLHttpRequest的实例。
       var xhr = new XMLHttpRequest();
       //然后，向远程主机发出一个HTTP请求。xmlHttpRequest.open(method,url,true or false); true代表异步，为false代表同步
       xhr.open('GET', 'http://localhost:8090/First/TryServlet');
       //设置HTTP请求的时限
       xhr.timeout = 3000;
       //用来指定回调函数。
       xhr.ontimeout = function(event){
　　　　 alert('请求超时！');
　　 }
       //如果请求类型是post，send方法要有参数。
       xhr.send();
       //监控XMLHttpRequest对象的状态变化
       xhr.onreadystatechange = function(){
       //xhr的readystate属性（值为：0,1,2,3,4）用来说明此次请求的进展。我们一般关心的是值为4（请求已完成）的情况。这里要注意的是：当readystate值为4（请求完成）时，请求不一定成功，请求成功与否需要关注status属性readystate值的每一次改变都会触发一次readystatechange事件，我们一般在这个事件中查看readystate的值，在readystate值为4并且status属性值为200时，做相应的处理。
if(xhr.readyState == 4 && xhr.status == 200 ){

console.log(xhr.responseText);
}else{
//xhr的status属性（值为：200,404,500,503这种）说明此次请求成功与否，我们一般关心的是值为200（请求已成功）的情况。
alert(xhr.readyState);
alert(xhr.status);
}
}
</script>
</head>
<body>

</body>
</html>

demo002.html

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <script type="text/javascript">
       var xhr = new XMLHttpRequest();
       //HTML 5新增了一个FormData对象，可以模拟表单
       //var formData = new FormData();
       //就相当于向后台传进参数username='张三'&age='24',简化了表单提交的操作
       //formData.append('username','张三');
       //formData.append('age','24');
       xhr.open('post', 'http://localhost:8090/First/TryServlet',true);
       不加上这句，那么后台Request.getParameter()获取不到参数数值
   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
       xhr.send("user=123");

       xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200 ){
console.log(xhr.responseText);
}else{
alert(xhr.readyState);
alert(xhr.status);
}
       }
   </script>
</head>
<body>

</body>
</html>

后台

package com.day1.cn;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

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

public class TryServlet extends HttpServlet {
   private String message;
   public static Connection conn = null;
   public static Statement st = null;
   public static ResultSet rs = null;
   List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();

   /**
   * Constructor of the object.
   */
   public TryServlet() {
       super();
   }

   /**
   * Destruction of the servlet. <br>
   */
   public void destroy() {
       super.destroy(); // Just puts "destroy" string in log
       // Put your code here
   }

   /**
   * The doGet method of the servlet. <br>
   *
   * This method is called when a form has its tag value method equals to get.
   *
   * @param request
   * the request send by the client to the server
   * @param response
   * the response send by the server to the client
   * @throws ServletException
   * if an error occurred
   * @throws IOException
   * if an error occurred
   */
   public void doGet(HttpServletRequest request, HttpServletResponse response)
           throws ServletException, IOException {

       // response.addHeader("Access-Control-Allow-Origin",
       // "http://10.1.8.167:1234");
       response.addHeader("Access-Control-Allow-Origin", "*");
       String username = request.getParameter("username");
       String age = request.getParameter("age");
       if(username!=null&&age!=null)
       {
           System.out.println(username+age);
       }

       response.setHeader("Access-Control-Allow-Credentials", "true");
       response.setHeader("Access-Control-Allow-Methods",
               "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
       response.setHeader(
               "Access-Control-Allow-Headers",
               "Origin, X-Requested-With, Content-Type,Token,Accept, Connection, User-Agent, Cookie");
       response.setHeader("Access-Control-Max-Age", "3628800");
       response.setContentType("text/html");
       String driver = "com.mysql.jdbc.Driver";
       String url = "jdbc:mysql://10.1.8.167:3306/scene";
       String user = "scene";
       String pass = "scene";
       try {
           Class.forName(driver);
           conn = DriverManager.getConnection(url, user, pass);
       } catch (ClassNotFoundException e) {
           // TODO Auto-generated catch block
           e.printStackTrace();
       } catch (SQLException e) {
           // TODO Auto-generated catch block
           e.printStackTrace();
       }
       try {
           st = conn.createStatement();
       } catch (SQLException e1) {
           // TODO Auto-generated catch block
           e1.printStackTrace();
       }
       String sql = "select * from admin_user";
       try {
           rs = st.executeQuery(sql);
       } catch (SQLException e1) {
           // TODO Auto-generated catch block
           e1.printStackTrace();
       }
       try {
           if (rs.next()) {
               // 将rs类型转换为list类型

ResultSetMetaData md = rs.getMetaData();

int columnCount = md.getColumnCount();

while (rs.next()) {

Map<String, Object> rowData = new HashMap<String, Object>();

for (int i = 1; i <= columnCount; i++) {

rowData.put(md.getColumnName(i), rs.getObject(i));

}

list.add(rowData);

               }
               System.out.println(list);
           }
       } catch (SQLException e1) {
           // TODO Auto-generated catch block
           e1.printStackTrace();
       }

// String json=JSON.toJSONString(list);
       PrintWriter out = response.getWriter();
       out.print(list);
       try {
           rs.close();
           st.close();
           conn.close();
       } catch (SQLException e) {
           // TODO Auto-generated catch block
           e.printStackTrace();
       }
   }

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

       // response.addHeader("Access-Control-Allow-Origin",
       // "http://10.1.8.167:1234");
       response.addHeader("Access-Control-Allow-Origin", "*");
       String username = request.getParameter("user");
       String age = request.getParameter("user");
       if(username!=null&&age!=null)
       {
           System.out.println(username+age);
       }