Ajax学习一

最新推荐文章于 2024-05-14 22:29:56 发布

xzcl

最新推荐文章于 2024-05-14 22:29:56 发布

阅读量265

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/x_zcl/article/details/49990859

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

XMLHttpRequest 是 AJAX 的基础

所以首先要创建 XMLHttpRequest

xmlhttp=new XMLHttpRequest();

因考虑有一些浏览器兼容性问题不支持 XMLHttpRequest 所以这样创建

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

创建好之后接下来是像服务器推送数据

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send()

用到了XMLHttpRequest open（）和send（）这两个方法。

open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。

参数：

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步

send(string) 将请求发送到服务器。

参数：

string：仅用于 POST 请求

如果发送的是get请求则吧参数写到URL后面就可以了

然后用send（）这个方法吧请求发送的服务器参数不用谢就行了

如果发送的是POST请求则吧参数写到send（）的参数里面URL后面不用跟着写参数如：xmlhttp.send("fname=Bill&lname=Gates")；。

获取服务器的响应数据

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

xmlhttp.responseText

xmlhttp.responseXML

这样获取的服务器返回的值

onreadystatechange事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status

200: "OK"

404: 未找到页面

下面这个例子就是说 onreadystatechange事件以及相应的响应判断

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

AJAX完整例子

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/test1.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" οnclick="loadXMLDoc()">通过 AJAX 改变内容</button>

</body>
</html>