09---Ajax01（简介）

最新推荐文章于 2024-09-01 10:00:00 发布

bzuld

最新推荐文章于 2024-09-01 10:00:00 发布

阅读量465

点赞数

分类专栏： JAVAEE-----学习《李兴华JAVAEE》随记文章标签： xmlhttprequest ajax 浏览器 asynchronous 服务器 javascript

本文链接：https://blog.csdn.net/bzuld/article/details/7520353

版权

JAVAEE-----学习《李兴华JAVAEE》随记专栏收录该内容

55 篇文章 0 订阅

订阅专栏

Ajax本身不属于一门新技术，而是一门就技术的烦心而已；
ajax（asynchronous javascript and xml，异步javascript and xml），
他的主要作用是用于页面的局部刷新；

Ajax的核心就是XMLHttpRequest对象：
不同的浏览器创建XMLHttpRequest对象的方式不同：
<script language="javaScript">
  var xmlHttp;
  function creatXMLHttp(){
   if(window.XMLHttpRequest){//判断当前使用的浏览器
    xmlHttp=new XMLHttpRequest();//表示是使用的FireFox内核的浏览

器
    }esle{         //表示使用的是ie浏览器
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
  }
</script>
1、XMLHttpRequest对象的属性：
属性   描述
onreadystatechange  指定当readState状态改变时使用的操作，一般都用于指定具体的回

调函数
readyState   返回当前请求的状态，只读
responseBody   将回应信息正文以unsigned byte数组形式返回，只读
responseStream   以Ado Stream对象的形式返回响应信息，只读
responseText   接受以普通文本返回的数据，只读
responseXML   接收以XML文档形式回应的数据，只读
status    返回当前请求的http状态码，只读
status    返回当前请求的响应行状态，只读

readState取值：
·0：请求没有发出(在调用open()函数之前)
·1：请求已经建立但还没有发出(在调用send()函数之前)
·2：请求已经发出正在处理之中(这里通常可以从响应得到内容的全部)
·3：请求已经处理，正在接收服务器的信息，响应响应中通常有部分数据可用，
但是服务器还没有完成响应；
·4：响应已完成，可以访问服务器响应并使用它；

XMLHttpRequest对象的方法：
方法   描述
abort()    取消当前发出的请求
getAllResponseHeaders()  取得所有的HTTP头信息
getResponseHeader()  取得一个指定的HTTP头信息
open()    创建一个HTTP请求，并执行请求模式，例如get请求或者post请求
send()    将创建的请求发送到服务器端，并接收回应信息
setRequestHeader()  设置一个指定请求的HTTP头信息

下面通过一个简单的局部刷新完成一个AJAX的操作；
Ajax必须在服务器上使用，下面建立的content.html中存在内容要通过ajax异步的返回到调用处；
<%@ page contentType="text/html" pageEncoding="gbk"%>
<html>
<head><title>这是测试</title>
  <scripte>
   var xmlHttp;
   function createXMLHttp(){
    if(window.XMLHttpRequest){//判断当前使用的浏览器
     xmlHttp=new XMLHttpRequest();//表示是使用的FireFox内

核的浏览器
   }esle{         //表示使用的是ie浏览器
     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

   function showMsg(){
    createXMLHttp();//创建XMLHttp对象
    xmlHttp.open("POST","content.html");
    xmlHttp.onreadystatechange=showMsgCallback();
    xmlHttp.send(null);
    }
   function showMsgCallback(){
    if(xmlHttp.readyState==4){
     if(xmlHttp.status==200){
      var text=xmlHttp.responsText;
      document.getElementById

("msg").innerHtml=text;
      }
     }
    }
  </script>
</head>
<body>
  <input type="button" onClick="showMsg()" value="调用ajax显示内容">
  <span id="msg"></span>
  <h3></h3>
</body>
</html>