AJAX基础知识

最新推荐文章于 2024-10-01 20:12:28 发布

code_AC

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量256

点赞数

分类专栏： javascript 文章标签： AJAX javascript

本文链接：https://blog.csdn.net/code_AC/article/details/82965083

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

定义

AJAX=
Asynchronous JavaScript and XML（异步的 JavaScript 和 XML)
所以从本质上来讲，AJAX还是javascript

工作原理

在这里插入图片描述

1、创建XMLHttpRequest对象

说明：所有浏览器均支持XMLHttpRequest对象
variable = new XMLHttpRequest();
针对IE5和IE6使用ActiveX对象：
variable = new ActiveXObject(“Microsoft.XMLHTTP”);

2、向服务器发送请求

使用XMLHttpRequest对象的open（）和send（）方法

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

方法open
      open(method,url,async)
      method:请求的类型；GET或者POST
      url:文件在服务器上的位置
      async:true(异步)false（同步)
      备注：GET和POST的区别，和POST相比，GET速度更快，所以一般情况下使用GET，
      但以下情况必须使用POST
-----------------------------------------------------------------------
1、无法使用缓存文件（更新服务器上的文件或数据库）
2、向服务器发送大量数据（POST没有数据限制）
3、发送包含未知字符的用户输入时，POST比GET更稳定也更可靠
-----------------------------------------------------------------------
XMLHttpRequest对象如果要用AJAX的话，async参数必须是true

3、服务器响应

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

	responseText:来获取字符串形式的数据响应
	responseXML:来获取XML形式的响应数据

4、onreadystatechange事件

每当 readyState 改变时，就会触发 onreadystatechange 事件
readyState 属性存有 XMLHttpRequest 的状态信息
在这里插入图片描述

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// 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","/try/ajax/ajax_info.txt",true);
	xmlhttp.send();
}
</script>
</head>
<body>

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

</body>
</html>