学习总结之 Ajax 2

前端之家收集整理的这篇文章主要介绍了学习总结之 Ajax 2前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

如何获得一个XmlHttpRequest对象?

Javascript代码

复制代码

收藏代码

  1. function getXmlHttpRequest(){
  2. var xhr=null;
  3. if(window.XMLHttpRequest){
  4. //非ie
  5. xhr=new XMLHttpRequest();
  6. }else{
  7. //从这里也可以看出微软的嚣张跋扈
  8. xhr=new ActiveXObject("Microsoft.XMLHTTP");
  9. }
  10. return xhr;
  11. }



一个简单的Ajax用法示例:检查用户名唯一性
Javascript代码

复制代码

收藏代码

  1. function checkUsername() {
  2. //创建checkname.do request
  3. var xhr=getXmlHttpRequest();
  4. var username=document.getElementById("username").value;
  5. var url="checkusername?username="+username;
  6. xhr.open("get",url,true);//true,为异步,可以在响应回来之前进行其它操作;默认为true
  7. //注册响应函数
  8. xhr.onreadystatechange=function(){
  9. //请求处理完毕后执行以下代码
  10. //xhr有5种状态,0到4,分别代表(0)请求未初始化,(1)请求已初始化但未发送,(2)请求已发送,(3)请求处理中,(4)请求处理完毕
  11. if(xhr.readyState==4){
  12. //响应处理,获取服务器返回的Text
  13. var text=xhr.responseText;
  14. document.getElementById("name_msg").innerHTML=text;
  15. }
  16. }
  17. //发送请求
  18. xhr.send(null);
  19. }



对应的HTML代码

Jsp代码

复制代码

收藏代码

  1. <form method="post" action="checkusername">
  2. username:
  3. <input name="username" id="username" onblur="checkusername()" />
  4. <span id="name_msg" style="color:red"></span>
  5. <br />
  6. <input type="submit" value="OK" />
  7. </form>


对应的servlet代码

Java代码

复制代码

收藏代码

  1. import java.io.IOException;
  2. import java.io.PrintWriter;
  3. import javax.servlet.ServletException;
  4. import javax.servlet.http.HttpServlet;
  5. import javax.servlet.http.HttpServletRequest;
  6. import javax.servlet.http.HttpServletResponse;
  7. public class CheckUserNameServlet extends HttpServlet {
  8. public void service(HttpServletRequest request,HttpServletResponse response)
  9. throws ServletException,IOException {
  10. response.setContentType("text/plain;charset=utf-8");//text/plain 很重要
  11. request.setCharacterEncoding("utf-8");
  12. PrintWriter out=response.getWriter();
  13. String username = request.getParameter("username");
  14. System.out.println(username);
  15. if ("tom".equals(username)) {//为方便起见,直接给了一个
  16. out.print("此用户名已被占用");
  17. } else {
  18. out.print("可以使用");
  19. }
  20. out.flush();
  21. out.close();
  22. }
  23. }
结果: 输入tom,提交:提示"此用户名已被占用" 这种使用Ajax的方法很繁琐,且容易出错,一一般都用jquery发送Ajax,但作为一个学习者,还是有必要了解这种原始的方法的.
原文链接:https://www.f2er.com/ajax/166730.html

猜你在找的Ajax相关文章