菜鸟教程ajax概念原理及使用

最新推荐文章于 2023-05-25 21:00:33 发布

GoogleNovto

最新推荐文章于 2023-05-25 21:00:33 发布

阅读量338

点赞数

分类专栏：问题整理

本文链接：https://blog.csdn.net/qq_44287129/article/details/103023566

版权

问题整理专栏收录该内容

24 篇文章 0 订阅

订阅专栏

AJAX总结
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
ajax是做异步、动态刷新网页的一门组合方法。
ajax工作原理：
在这里插入图片描述
XMLHttpRequest 对象
用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)//以下浏览器内建XMLHttpRequest
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();//创建 XMLHttpRequest 对象
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)//当readystate为4时且状态为‘200’-‘OK’时。表示响应已就绪。
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);//get方法，true-异步
	xmlhttp.send();
}
</script>
</head>
<body>

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

</body>
</html>

在这里插入图片描述

resporseText使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

resporseXML使用：
如果是XML对象，需要先进行文本解析。

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

AJAX - onreadystatechange 事件

在这里插入图片描述

function showHint(str)
{
    var xmlhttp;
    if (str.length==0)//当输入框str为空时，清空占位符，并退出函数。
    { 
        document.getElementById("txtHint").innerHTML="";//清空
        return;//退出
    }
    //输入框不为空，执行showHint()函数。
    if (window.XMLHttpRequest)
    {
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();//1、创建XMLHttpRequest对象
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)//判别响应是否就绪
        {	//就绪-执行响应
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);//拼接输入框字符串
    xmlhttp.send();//将请求发送到服务器
}