AJAX内容

最新推荐文章于 2024-02-17 13:45:00 发布

星来飞

最新推荐文章于 2024-02-17 13:45:00 发布

阅读量339

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_37041969/article/details/72719368

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.创建 XMLHttpRequest 对象：

variable = new XMLHttpRequest();

variable=new ActiveXObject("Microsoft.XMLHTTP"); （ 老版本 ）

请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject 。

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");
}

2.向服务器发送请求：

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

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

// send(string) string：仅用于 POST 请求

// 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：
1.无法使用缓存文件（更新服务器上的文件或数据库）
2.向服务器发送大量数据（POST 没有数据量限制）
3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

例如：

// xmlhttp.open("POST","demo_post.asp",true); POST 请求

// xmlhttp.open("GET","/ajax/demo_get.asp?t=" + Math.random(),true); 避免得到缓存结果

// xmlhttp.open("GET","/ajax/demo_get2.asp?fname=Bill&lname=Gates",true); 通过 GET方法发送信息，请向 URL 添加信息
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" οnclick="loadXMLDoc()">请求数据</button>
<div id="mydiv"></div>
</body>
</html>

例如2：

<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("POST","/ajax/demo_post2.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" οnclick="loadXMLDoc()">请求数据</button>
<div id="mydiv"></div>
</body>
</html>

setRequestHeader(header,value) // 向请求添加 HTTP头： header: 规定头的名称。value: 规定头的值

url 参数是服务器上文件的地址（任何文件）

服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

document.getElementById("mydiv").innerHTML=xmlhttp.responseText; // 获得字符串形式的响应数据。

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性。

例如：

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
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)
{
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("title");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
}
}
xmlhttp.open("GET","/example/xmle/books.xml",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>My Book Collection:</h2>
<div id="myDiv"></div>
<button type="button" οnclick="loadXMLDoc()">获得我的图书收藏列表</button>
</body>
</html>

星来飞

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX内容

1.创建 XMLHttpRequest 对象：variable = new XMLHttpRequest(); variable=new ActiveXObject("Microsoft.XMLHTTP"); （老版本）请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支
复制链接

扫一扫

专栏目录