AJAX学习

最新推荐文章于 2024-04-28 04:05:42 发布

qq_24381917

最新推荐文章于 2024-04-28 04:05:42 发布

阅读量174

点赞数

分类专栏：性能测试相关笔记

本文链接：https://blog.csdn.net/qq_24381917/article/details/106254962

版权

性能测试相关笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

AJAX

AJAX = 异步 javaScript和XML

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

AJAX实例

<html>
<head>
<!--实现脚本的代码 -->
<script type="text/javascript">
function loadXMLDoc()
{
    document.write("Hello World!")
}
</script>
</head>
<body>
<div id="myDiv"><h3>Let AJAX change this text</h3></div>
<!--定义一个按钮，按钮的点击事件是调用loadXMLDoc(),这个方法在head里面的使用javrscrip实现-->
<botton type="button" onclick="loadXMLDoc()">Change Content</botton>
</body>
</html>

AJAX - 创建 XMLHttpRequest 对象

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

创建XMLHttpRequest对象

variable = new XMLHttpRequest();

AJAX - 向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法

语法：

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

方法说明：

async True or False?:

async=ture:

在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

async=false:

JavaScript 会等到服务器响应就绪才继续执行。
如果服务器繁忙或缓慢，应用程序会挂起或停止。

AJAX - 服务器响应

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

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

onreadystatechange 事件

readyState 属性存有 XMLHttpRequest 的状态信息,每当 readyState 改变时，就会触发 onreadystatechange 事件

Ajax实例

以下实例在W3School html编辑器中执行:

GET请求：


<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
<!--创建XMLHttpRequest对象-->
xmlhttp=new XMLHttpRequest(); 
<!--当readyState状态为4（请求完成），并且状态码saatus为200时，获取字符串类型的响应数据
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
<!--调用XMLHttpRequest 对象的 open() 和 send() 方法向服务端发送请求，方法为GET，异步为ture>
xmlhttp.open("GET","/ajax/demo_get.asp",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<!--按钮点击事件调用函数-->
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>

</body>
</html>

POST请求


<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
<!--创建XMLHttpRequest对象-->
xmlhttp=new XMLHttpRequest();
<!--调用XMLHttpRequest 对象的 open() 和 send() 方法向服务端发送请求，方法为POST，异步为ture>
xmlhttp.open("POST","/ajax/demo_post.asp",true);
xmlhttp.send();
<!--当readyState状态为4（请求完成），并且状态码saatus为200时，获取字符串类型的想要数据
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
 
</body>
</html>