AJAX学习

发布时间：2020-12-16 03:05:06 所属栏目：百科来源：网络整理

导读：背景最近的项目中大量地方需要使用AJAX，无奈，谁叫我既要写前台又要写后台呢，只好学习下这个技术点。主要参考W3school文档： http://www.w3school.com.cn/ajax/index.asp 记录下这些知识点，便于日后自己查阅下面的一些测试代码建议在W3school中测试 AJ

背景

最近的项目中大量地方需要使用AJAX，无奈，谁叫我既要写前台又要写后台呢，只好学习下这个技术点。

主要参考W3school文档：

http://www.w3school.com.cn/ajax/index.asp

记录下这些知识点，便于日后自己查阅

下面的一些测试代码建议在W3school中测试

AJAX 基础

AJAX = Asynchronous JavaScript and XML

即：异步的JavaScript和XML

AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在很多网站可以见到使用这种技术。

AJAX-XMLHttpRequest

创建XMLHttpRequest对象

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

创建XMLHttpRequest对象的语法：

variable = new XMLHttpRequest();

但是对于老版本的Internet Explorer（IE5和IE6）却是使用ActiveX对象，所以在开发中为了适应大多数的浏览器，常使用如下：

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");
 ?}

向服务器发送请求

使用XMLHttpRequest对象的open()和send()方法：

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

method

description

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。string：仅用于 POST 请求

GET还是POST？

与POST相比，GET更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST没有数据量限制）
发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

示例：GET请求

1.简单的GET请求

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
 ?{// code for IE7+,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?t=" + Math.random(),true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>

2.通过GET方法发送信息

 
 
 
 示例：POST请求 
 
 
 1.简单POST请求 
 
 
  
 
 
 2.像HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头。然后在send()方法中规定您希望发送的数据 
 
 
  
 
 
 注意：setRequestHeader(header,value)向请求添加 HTTP 头，header:规定头的名称，value:规定头的值。 
 
 
 url-服务器上的文件 
 
 
 open()方法的url参数是服务器上文件的地址： 
 
 
  
 
 
 该文件可以是任何类型的文件，比如.txt和.xml，或者服务器脚本文件，比如.asp和.php（在传回响应之前，能够在服务器上执行任务）。
 
 
 
 异步-True or False ？ 
 
 
 XMLHttpRequest对象如果要用于AJAX的话，其open()方法的async参数必须设置为true。 
 
 
 对于web开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。 
 
 
 AJAX出现之前，这可能会引起应用程序挂起或停止。 
 
 
 通过AJAX，JavaScript无需等待服务器的响应，而是： 
 
 
 
在等待服务器响应时执行其他脚本 
  当响应就绪后对响应进行处理 
 

 
 Async=true 
 
 
 当使用async=true时，请规定在响应处于onreadystatechange事件中的就绪状态时执行的函数 
 
 
  
 
 
 Async=false 
 
 
 如需使用async=false，请将open()方法中的第三个参数改为false 
 
 
 不推荐使用async=false，但是对于一些小型的请求，也是可以的。 
 
 
 请记住，JavaScript会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。 
 
 
 注释：当您使用async=false时，请不要编写onreadystatechange函数-把代码放到send()语句后面即可： 
 
 
  
 
服务器响应 
 

 
 使用XMLHttpRequest对象的responseText或responseXML属性。 
 
 
 
responseText获得字符串形式的响应数据。 
  responseXML获得XML形式的响应数据。 
 

 
 1.responseText 属性 
 
 
 如果来自服务器的响应并非XML，请使用responseText属性。 
 
 
 responseText属性返回字符串形式的响应，因此您可以这样使用： 
 
 
 document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
 
 
 2.responseXML属性 
 
 
 如果来自服务器的响应是XML，而且需要作为XML对象进行解析，请使用responseXML属性： 
 
 
 请求books.xml文件： 
 http://www.w3school.com.cn/example/xmle/books.xml 
 并解析响应： 
 
 
 <html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
if (window.XMLHttpRequest)
 ?{// code for IE7+,IE5
 ?xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 ?}
xmlhttp.onreadystatechange=function()
 ?{
 ?if (xmlhttp.readyState==4 && xmlhttp.status==200)
 ? ?{
 ? ?xmlDoc=xmlhttp.responseXML;
 ? ?txt="";
 ? ?x=xmlDoc.getElementsByTagName("title");
 ? ?for (i=0;i<x.length;i++)
 ? ? ?{
 ? ? ?txt=txt + x[i].childNodes[0].nodeValue + "<br />";
 ? ? ?}
 ? ?document.getElementById("myDiv").innerHTML=txt;
 ? ?}
 ?}
xmlhttp.open("GET","/example/xmle/books.xml",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>My Book Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">获得我的图书收藏列表</button>
</body>
</html> 
 
 
 
onreadystatechange事件 
 

 
 当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当readyState改变时，就会触发onreadystatechange事件。readyState属性存有XMLHttpRequest的状态信息。 
 
 
 下面是 XMLHttpRequest 对象的三个重要的属性： 
 
 
 
 
 
 
 
onreadystatechange存储函数（或函数名），每当readyState属性改变时，就会调用该函数 
  readyState存有XMLHttpRequest的状态。从0到4发生变化。 
 

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

status 
 

200:“OK” 
  404:未找到页面 
 

 
 在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。 
 
 
 当readyState等于4且状态为200时，表示响应已就绪： 
 
 
 xmlhttp.onreadystatechange=function()
 ?{
 ?if (xmlhttp.readyState==4 && xmlhttp.status==200)
 ? ?{
 ? ?document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 ? ?}
 ?} 
 
 
 使用Callback函数 
 
 
 callback函数是一种以参数形式传递给另一个函数的函数。 
 
 
 如果您的网站上存在多个AJAX任务，那么您应该为创建XMLHttpRequest对象编写一个标准的函数，并为每个AJAX任务调用该函数。 
 
 
 该函数调用应该包含URL以及发生onreadystatechange事件时执行的任务（每次调用可能不尽相同）： 
 
 
 function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
 ?{
 ?if (xmlhttp.readyState==4 && xmlhttp.status==200)
 ? ?{
 ? ?document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 ? ?}
 ?});
} 
 
 
 AJAX-高级 
 
 
 ASP/PHP请求实例-AJAX用于创造动态性更强的应用程序。 
 http://www.w3school.com.cn/ajax/ajax_asp_php.asp 
 
 
 AJAX可用来与数据库进行动态通信。 
 http://www.w3school.com.cn/ajax/ajax_database.asp 
 
 
 AJAX可用来与XML文件进行交互式通信。 
 http://www.w3school.com.cn/ajax/ajax_xmlfile.asp 
 
 
 AJAX实例 
 
 
 使用XMLHttpRequest对象的实例 
 http://www.w3school.com.cn/example/ajax_examples.asp 
 
 
 文章来源：
 
 http://www.54tianzhisheng.cn/2017/06/23/AJAX/?utm_source=tuicool&utm_medium=referral

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!