btn.onclick = function(){ var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"); xhr.open("get","MyServlet?message="+document.getElementsByTagName("input")[0].value,true); xhr.send(); xhr.onreadystatechange = function(){ if(xhr.readyState==4 && xhr.status==200){ alert(xhr.responseText); } }; }
readyState:
0: 请求未初始化
1: 服务器连接已建立，还没发送
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
当 readyState 等于 4 且状态为 200 时，表示响应已就绪.
请求方式是get，并且只有当返回的状态码为200的时候，才会打印出responseText，这个就是对应的
out.println("你好，这是服务器返回的信息！");
这句话。
1.5 基于post方式的数据请求
get方法会在URL地址栏里显示你提交所带的值，post方法不会。所以，相对来说，post方法比较安全。
post方法在流程上和get方式差不多，我就直接上代码了:
window.onload = function(){ var btn = document.getElementById("submit"); btn.onclick = function(){ var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"); xhr.open("post","MyServlet",true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); var postData = {message : document.getElementsByTagName("input")[0].value}; var postDataStr = (function(obj){ // 转成post需要的字符串. var str = ""; for(var prop in obj){ str += prop + "=" + obj[prop] + "&" } return str; })(postData); alert(postDataStr); xhr.send(postDataStr); xhr.onreadystatechange = function(){ if(xhr.readyState==4 && xhr.status==200){ alert(xhr.responseText); } }; } };
MyServlet.java
import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class MyServlet extends HttpServlet{ @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("UTF-8"); String msg = req.getParameter("message"); System.out.println(msg); resp.setContentType("text/html;charset=utf-8"); PrintWriter out=resp.getWriter(); out.println("你好，这是服务器返回的信息！"); out.flush(); out.close(); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doGet(req, resp); } }
以上所述是小编给大家介绍的JavaScript中浅讲ajax图文详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: