AJAX AJAX简介

最新推荐文章于 2023-05-11 13:54:17 发布

Estom_yin

最新推荐文章于 2023-05-11 13:54:17 发布

阅读量335

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/Estom_yin/article/details/52015802

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

>作用

>>他不是一种新的语言，而是一种使用给现有标准的新方法。

>>AJAX是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下

>>用于快速创建动态网页的技术。通过在后台与服务器进行少量的数据交换，AJAX可以是网页实现异步更新。

>AJAX XHR(AJAX XMLHttpRequest()

>>XHR创建对象

对象的定义：xmlhttprequest，用于在后台与服务器交换数据。

语法：variable = new XMLHttpRequest()

>XHR请求

xmlhttp.open("GET","test.txt",true);

xmlhttp.send();

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。 string：仅用于 POST 请求

方法

描述

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

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

send(string)

将请求发送到服务器。

string：仅用于 POST 请求

发送请求的代码：

<span style="font-size:14px;"><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("GET","/ajax/demo_get.asp",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" οnclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>

</body>
</html>
</span>

//说明在按钮的点击出发的函数中，建立了一个ajax对象，该对象调用匿名函数，将请求传递非服务器，然后接受返回内容，最终显示在指定位置

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

这是一个简单的get请求

<span style="font-size:14px;">xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");</span>

能够实现在send发送请求的时候添加参数。想请求添加了http的头，包括header参数和value参数

优势：

在等待服务器响应是可以执行其他脚本

当响应就绪后对响应进行处理

>XHR响应

>>发送请求得到响应

>>得到的响应包括两种形式

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。需要将响应作为xml对象进行解析

>onreadystatechange事件

每当readyState被改变是，就会触发onreadystatechange事件

readystate属性存有XMLHttpRequest的状态信息

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

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status

200: "OK"

404: 未找到页面

当有多个函数触发readystate改变时，为他们建立统一的函数调用形式，此时不再适用匿名函数作为onreadystatechange 的方法，而是调用其它函数，完成这个过程。

<span style="font-size:14px;"><html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
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=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/ajax/test1.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" οnclick="myFunction()">通过 AJAX 改变内容</button>

</body>
</html></span>

Estom_yin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
**AJAX** AJAX简介

>作用>>他不是一种新的语言，而是一种使用给现有标准的新方法。>>AJAX是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下>>用于快速创建动态网页的技术。通过在后台与服务器进行少量的数据交换，AJAX可以是网页实现异步更新。>AJAX XHR(AJAX XMLHttpRequest()>>XHR创建对象对象的定义：xmlhttpreque
复制链接

扫一扫