js实验2.(4)AJAX的POST请求

来源：互联网发布：php字符串的拆分编辑：程序博客网时间：2024/05/21 08:57

5、用ajax-post技术(ajaxPost.html，post.jsp)实现修改数据的功能。

实验要求：

选择输入某个id后：

当输入新的姓名并离开(onblur)时用ajax技术调用post.jsp修改具有该id记录的姓名的值。

ajaxPost.html代码如下：

<!DOCTYPE html><html><head>  <title>AJAX-post</title>  <style>    p {font-size:20px}  </style></head><body>  <h1>Ajax-post</h1>  <p>id：<input id="t1" type="text"></p>  <p>姓名：<input id="t2" type="text" onblur="r()"></p>  <p><span id="t4"></span></p>   <script language="JavaScript" type="text/javascript">   var xmlhttp;   if(window.XMLHttpRequest){   xmlhttp=new XMLHttpRequest(); //IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码   }else{   xmlhttp=new XMLHttpRequest("Microsoft.XMLHTTP");//IE6, IE5 浏览器执行代码   }   function r(){   var t1=document.getElementById("t1");   var t2=document.getElementById("t2");   ////汉字需要编码   var param="t1="+encodeURIComponent(t1.value)+"&t2="+encodeURIComponent(t2.value);   xmlhttp.open("post","post.jsp",false);//(method,url：文件在服务器上的位置,是否异步)   //如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。   //然后在 send()方法中规定您希望发送的数据：   xmlhttp.setRequestHeader("Content-Type",   "application/x-www-form-urlencoded");   xmlhttp.send(param);//将请求发送到服务器。string：仅用于POST请求   var t4=document.getElementById("t4");   t4.innerHTML=xmlhttp.responseText;   }   </script></body></html>

post.jsp代码如下：

<%@ page language="java" import="java.util.*,java.io.*,java.sql.*,java.awt.List"          contentType="text/html; charset=utf-8"%><%request.setCharacterEncoding("utf-8");%>      <%!Connection conn;//数据库的连接操作boolean connect() {String connectString = "jdbc:mysql://localhost:3306/teaching17"+ "?autoReconnect=true&useUnicode=true&characterEncoding=UTF-8&&useSSL=false";try {Class.forName("com.mysql.jdbc.Driver");conn = DriverManager.getConnection(connectString, "root", "0103");return true;} catch (Exception e) {System.out.println(e.getMessage());}return false;}String econ=new String();ResultSet executeUpdate(String sqlSentence) {    Statement stat;    ResultSet rs = null;          try {stat =(Statement) conn.createStatement();       //获取执行sql语句的对象int count = stat.executeUpdate(sqlSentence);System.out.println(count+"条记录被修改\n");if(count!=0)econ="修改成功!";else econ="修改失败!";    } catch (Exception e) {System.out.println(e.getMessage());econ="修改失败!";System.out.println("0条记录被修改\n");    }    return rs;}%> <% String ID=request.getParameter("t1"); String NAME=request.getParameter("t2");     if(connect()){     econ="修改失败!";         String m=new String();         m="update stu set name='"+NAME+"' where id='"+ID+"';";         System.out.println(m);         ResultSet rs = executeUpdate(m);         } %>  <%=econ%>

这里需要注意几个知识点：

1.AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

不推荐使用 async=false，但是对于一些小型的请求，也是可以的。

请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

注意：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

参考至—— http://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html

0 0