ajax传统的方式制作ajax

//这是前台的代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript">
  /*onload = function (){
    //这是判断浏览器是IE还是FireFox
    if(navigator.appName == 'Netscape'){
    alert('这是火狐浏览器');
    }else if(navigator.appName == 'Microsoft Internet Explorer')
    {
    alert('这是IE浏览器');
    }
     if(window.XMLHttpRequest)//判断浏览器是否属于Mozilla,Sofari
       {
           alert("firefox");
       }
        else if(window.ActiveXObject)//判断浏览器是否属于IE
       {
    alert('这是IE浏览器');
    }
   }*/



   //这是最传统的ajax
   //第一步：创建核心对象
   onload = function(){
   var xmlRequest = null;
   if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
     xmlRequest=new XMLHttpRequest();
    }
   else if(window.ActiveXObject)
     {// code for IE6, IE5

     xmlRequest=new ActiveXObject("Microsoft.XMLHTTP");
     }
   if(!xmlRequest)
   {

    alert("创建核心对象错误!!!");
    return fasle;
   }
   //第二部:打开并发送请求
   //1、这是get发送请求的方式，并且还带有参数
   /*
    第一个参数是请求的方式，最好的大写，第二个参数是请求的路径(这里的路径千万不要用到${pageContext,request.contextPath),也不要
    在前面加上'/',例如：/test?p=test&namecaohuan,这也会访问不到路径，第三个参数表示是异步进行还是同步进行，XMLHttpRequest
    对象如果要用于AJAX的话其open()方法的第三个参数必须设置为 true，一般我们ajx都是进行异步的操作，所以一般是true
   */
  /* xmlRequest.open('GET','test?p=test&name=caohuan',true);
   //发送请求，get发送请求并带有参数send中并不带有参数，只有post请求才带有参数
   xmlRequest.send();*/
   //2、这是post发送请求，并且带有参数
   xmlRequest.open('POST','test?p=test',true);
   //注意这里post发送请求带有参数的形式,要用post发送请求带有参数，必须要加上下面的第一行的代码，否则后台根本接收不到参数
   xmlRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   xmlRequest.send("name=caohuan&id=2");
   //第三部：接受返回数据
   xmlRequest.onreadystatechange = function(){

    //判断请求是否发送成功，并且返回数据，这里注意readyState的state的s是大写，我经常犯这种错误
    if(xmlRequest.readyState == 4 && xmlRequest.status == 200)
    {
     //responseText这是接受字符窜的数据，responseXML是接受xml格式的数据
     var value = xmlRequest.responseText;
     alert(value);
    }
   }

  }


</script>
</head>

<body>

</body>
</html>

//这是后台的代码

package cn.itcast.servlets;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxTestServlet extends HttpServlet {

@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
   request.setCharacterEncoding("UTF-8");
   response.setContentType("text/html;charset=utf-8");
   String p = request.getParameter("p");
   if("test".equals(p))
   {
    doTest(request, response);
   }
}

protected void doTest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
  String name = request.getParameter("name");
  String id = request.getParameter("id");
  response.getWriter().print(name+"-->" +id);

}

}

ajax传统的方式制作ajax

猜你喜欢