首页 > 代码库 > ajax和json及案例

ajax和json及案例

2024-08-22 22:00:15   223人阅读

不用jQuery的ajax流程

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script>
/*
 * 1.大致的流程
 *    * 创建核心对象
 *    * 绑定一个函数
 *    * 打开和服务端连接
 *    * 发送数据
 *    * 处理函数   成本的付出
 * 2.核心对象的5种状态分别代表的含义
 */    
function GetXmlHttpObject()
{
  var xmlHttp=null;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
  return xmlHttp;
}
function fn(){
    //1.创建对象
    var xmlHttpRequest=GetXmlHttpObject();
    //2.绑定函数
    xmlHttpRequest.onreadystatechange=fm;
    //3.打开
    xmlHttpRequest.open("get","test.jsp",true);
    //4.发送
    xmlHttpRequest.send();
    //5.处理绑定函数
    function fm(){
        if (xmlHttpRequest.readyState==4)
        {
          if (xmlHttpRequest.status==200)
          {
            document.getElementById(‘dv‘).innerHTML=xmlHttpRequest.responseText;
          }
          else
          {
            alert("Problem retrieving data:" + xmlHttpRequest.statusText);
           }
        }
    }
    
}
</script>
<body>
<button onclick="fn()">按钮</button>
<div id="dv"></div>
</body>
</html>

test.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
    out.println("AAAAAA");
%>

 

ajax和json及案例


联系
我们