ajax和json及案例

Posted 我和Messi五五开

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax和json及案例相关的知识,希望对你有一定的参考价值。

不用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及案例的主要内容,如果未能解决你的问题,请参考以下文章

AJAX 响应:数据(JSON、XML)还是 HTML 片段? [关闭]

React ajax请求 及axiospubsubfetch使用

Ajax 解释Ajax的XML和JSON格式,操作Ajax的几种封装方法案例+解释

第15章WEB15-AJAX和JQuery案例篇

jSon和Ajax登录功能,ajax数据交互案例

链接中的 URL 片段和 JSF 中的 ajax 重定向