首页 > 代码库 > ajax发送异步请求

ajax发送异步请求

2024-09-16 04:51:20   216人阅读

一：得到XMLHttpRequest对象

　　ajax其实只需要学习XMLHttpRequest一个对象

　　大多数浏览器都支持：　　

var xmlHttp = new XMLHttprequest();

　　IE 6.0:

var mltHttp = new ActiveXObject("Msxml2.XMLHTTP");

　　IE 5.5 及更早的IE

var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

  　　* 编写创建XMLHttpRequest对象函数　　

function createXMLHttpRequest(){
            try{
           return  new XMLHttpRequest();
     }catch(e){
            try{
                  return new ActiveXObject("Msxml2.XMLHTTP");
           }catch(e){
                    try{ 
                           return new ActiveXObject(Microsoft.XMLHTTP‘);  
                   }catch(e){
                           throw e；
                   }
          }
    }
}

二：打开与服务器的链接

　　xmlHttp.open()用来打开与服务器的链接

　　参数：请求方式，请求URL，请求是否为异步

xmlHttp.oprn("GET","/AServlet",true);

三：发送请求　

xmlHttp.send(null);//如果不写null可能导致部分浏览器无法使用

GET请求必须写null

四：

　　要在xmlHttp对象的一个事件上注册监听器：onreadystatechange

　　得到xmlHttp对象的状态：

var state = xmlHttp.readyState;//可能是0、1、2、3、4

　　得到服务器响应的状态码

var status = xmlHttp.status;//例如200、404、500

　　得到服务器响应的内容

var content = xmlHttp.responseText;//得到服务器响应的文本格式的内容
var content = xmlHttp.responseXML;//得到服务器响应的XML响应内容，它是Document对象了
xmlHttp.onreadystatechange = function(){//xmlHttp的5种状态都会调用本方法
    if(xmlHttp.readyState ==4 && xmlHttp.status ==200){//双重判断，既要响应成功，又要服务器响应结束
    //获取服务器响应的内容
        var text = xmlHttp.responseText;
    }
};

五：POST(如果发送请求时带有参数，一般使用POST请求）

　　open　:

xmlHttp.open("POST");

　　添加一步：设置Content-Type请求头

xmlHttp.setRequestHeander("Content-Type","application/x-www-form-urlencoded");

　　send:

xmlHttp.send("username=xxx&password=xxx");

jsp

<%--
  Created by IntelliJ IDEA.
  User: YuWenHui
  Date: 2017/4/20 0020
  Time: 19:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
  <head>
    <title>AJAX</title>
      <script type="text/javascript">
          function createXMLHttpRequest() {
              try {
                    return new XMLHttpRequest();
              }catch (e){
                  try {
                         return new ActiveXObject("Msxml2.XMLHTTP");
                  }catch (e){
                      try {
                            return new ActiveXObject("Microsoft.XMLHTTP");
                      }catch (e){
                            throw e;
                      }
                  }
              }
          }
          window.onload = function () {
              var username = document.getElementsByName("username");
              username.onblur=function () {
                  var xmlHttp = createXMLHttpRequest();
                  xmlHttp.open("POST","<c:url value=http://www.mamicode.com/‘/ValidateUsenameServlet‘/>",true);
                  xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                  xmlHttp.send("username="+username.value);
                  xmlHttp.onreadystatechange=function () {
                      if(xmlHttp.readyState==4 && xmlHttp.status ==200){
                          var span = document.getElementsByName("errorSpan");
                          if(xmlHttp.responseText == 1){
                             span.innerHTML="该用户名已被注册";
                          }else {
                              span.innerHTML="";
                          }
                      }
                  }
              }
          }
      </script>
  </head>
  <body>
    <h1>测试用户名是否被注册</h1>
    <form action="" method="post">
        用户名：<input type="text" name="username" ><span name="errorSpan"></span><br/>
        密  码：<input type="password" name="password"><br>
        <input type="submit" value="http://www.mamicode.com/登陆">
    </form>
  </body>
</html>

sevlet

package servlet;

import java.io.IOException;

/**
 * Created by YuWenHui on 2017/4/20 0020.
 */
public class ValidateUsenameServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        request.setCharacterEncoding("utf-8");
        String name = request.getParameter("username");
        if ("yuwenhui".equalsIgnoreCase(name) && "余文辉".equalsIgnoreCase(name)){
            response.getWriter().print("1");
        }else {
            response.getWriter().print("0");
        }
    }
}

 

ajax发送异步请求


联系
我们