原生JS中的Ajax

最新推荐文章于 2021-11-15 23:28:37 发布

xiongdaandxiaomi

最新推荐文章于 2021-11-15 23:28:37 发布

阅读量512

点赞数

分类专栏： JavaScript 文章标签： ajax JavaScript 原生

本文链接：https://blog.csdn.net/xiongdaandxiaomi/article/details/82854195

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、什么是AJAX

Ajax即“Asynchronous Javascript And XML”(异步Javascript和XML)，是指一种创建交互式应用的网页开发技术。
Ajax不是新的编程语言，而是一种使用现有标准的新方法。
Ajax 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

二、XMLHttpRequest对象

1、XMLHttpRequest对象用于在后台与服务器交换数据。意味着可以在不重新加载整个网页的情况下，对网页某部分进行更新。
2、实例

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

三、向服务器发送请求

1、向服务器发送请求，我们可以使用XMLHttpRequest对象的open()和send()方法。

方法	描述
open（method,url,async）	规定请求的类型，URL以及是否异步处理请求。 method:请求的类型；GET或POST url:请求路径 async:true(异步)或false（同步）
send（String）	将请求发送到服务器。String：仅用于POST请求。

2、Get请求

xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();

3、Post请求

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

四、服务器响应

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

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

五、onreadystatechange事件

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

六、使用callback函数的ajax实例

<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// IE7+, Firefox, Chrome, Opera, Safari 代码
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6, IE5 代码
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
	loadXMLDoc("/try/ajax/ajax_info.txt",function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	});
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div>
<button type="button" onclick="myFunction()">修改内容</button>

</body>
</html>