传统AJAX小例

Posted 2020-09-20 红狗<葬爱>贼公子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了传统AJAX小例相关的知识，希望对你有一定的参考价值。

index.jsp:

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>Insert title here</title>
 8 
 9 <script type="text/javascript">
10     http_request = null;
11     function test_ajax(){
12         if(http_request == null){
13             if(window.XMLHttpRequest){
14                 http_request = new XMLHttpRequest();
15             }
16             else if(window.ActiveXObject){
17                 try{
18                     http_request = new ActiveXObject("Msxml2.XMLHTTP");
19                 }catch(e){
20                     try{
21                         http_request = new ActiveXObject("Microsoft.XMLHTTP");
22                     }
23                     catch(e){
24                         
25                     }
26                 }
27             }
28         }
29         if(http_request == null){
30             console.log("不能创建XMLHttpRequest对象实例");
31             return false;
32         }
33         console.log("创建XMLHttpRequest对象成功");
34         http_request.onreadystatechange = getResult;//绑定处理函数
35         
36         http_request.open("POST","second.jsp",true);//true异步---链接
37         
38         var msg = "";
39         msg+="name=周一";
40         msg+="&age=45";
41         console.log("msg::"+msg);
42         http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置POST方式额外请求头，GET则不需要
43         http_request.send(encodeURI(msg));
44         /*
45             知识点：：传送不支持中文，传送先编码，收到时解码-------------
46         */
47     }
48     function getResult(){
49         console.log("ajax响应结果：：readyState::"+http_request.readyState+"::status::"+http_request.status);
50         if(http_request.readyState == 4){
51             if(http_request.status == 200){
52                 alert(http_request.responseText);
53             }
54         }
55     }
56 </script>
57 </head>
58 <body>
59 <hr>
60 <form action="second.jsp" onsubmit="return false;">
61     <!-- <input type="submit" value="提交" onclick=""  /> -->
62     <input type="button"  value="ajax" onclick="test_ajax()" />
63 </form>
64 </body>
65 </html>

second.jsp:

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>Insert title here</title>
 8 </head>
 9 <body>
10 <hr>
11 the second page
12 <hr>
13 
14 <%
15     String getStr = request.getParameter("name").toString();
16     String transfer = new String(getStr.getBytes("ISO-8859-1"),"UTF-8");
17     out.print(transfer);
18 %>
19 <%=request.getAttribute("name") %>
20 </body>
21 <%=request.getParameter("age")%>
22 <hr>
23 中文支持-
24 </html>

View Code

以上是关于传统AJAX小例的主要内容，如果未能解决你的问题，请参考以下文章

代码生成器小例

html PHP代码片段： - AJAX基本示例：此代码演示了使用PHP和JavaScript实现的基本AJAX功能。