AJAX学习笔记

最新推荐文章于 2024-08-18 22:16:18 发布

f555f

最新推荐文章于 2024-08-18 22:16:18 发布

阅读量408

点赞数

分类专栏：学习笔记文章标签： ajax

本文链接：https://blog.csdn.net/f555f/article/details/52754597

版权

学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、AJAX是什么：

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。

二、XMLHttpRequest

1、介绍：

XMLHttpRequest 是 AJAX 的基础。
XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2、创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括IE5和IE6，请检查浏览器是否支持XMLHttpRequest对象。如果支持，则创建XMLHttpRequest对象。如果不支持，则创建 ActiveXObject

创建实例

 var xmlhttp;
 if (window.XMLHttpRequest)//检查是否支持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","ajax_info.txt",true);
    xmlhttp.send();

方法
（1）open(method,url,async) —-规定请求的类型、URL 以及是否异步处理请求。

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

（2）send(string) —–将请求发送到服务器。

string：仅用于 POST 请求

注：GET与POST的选择：
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
（1）无法使用缓存文件（更新服务器上的文件或数据库）
（2）向服务器发送大量数据（POST 没有数据量限制）
（3）发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

四、GET VS POST

1、GET请求：

get请求实例：

    xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
    xmlhttp.send();

源码展示：

<html><!DOCTYPE html>
<html>
<head>
<script>
    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() {                 //onreadystatechange该事件处理函数由服务器触发，而不是用户。改变readyState属性是服务器对客户端连接操作的一式
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                 {
                 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                    }
                }
            xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
            xmlhttp.send();
    }
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>

</body>
</html>

2、POST请求：

如果需要像HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头。然后在send()方法中规定您希望发送的数据：
实例

xmlhttp.open("POST","ajax_test.html",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("fname=Henry&lname=Ford");

方法：
（1）setRequestHeader(header,value) —–向请求添加 HTTP 头。

header: 规定头的名称
value: 规定头的值

源码：

<html><!DOCTYPE html>
<html>
<head>
<script>
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("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>

</body>
</html>

五、几点说明：

1、url-服务器上的文件

open() 方法的 url 参数是服务器上文件的地址：

xmlhttp.open("GET","ajax_test.html",true)

该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如.asp和.php（在传回响应之前，能够在服务器上执行任务）。

2、异步-True或False？

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 对象如果要用于 AJAX 的话，其open()方法的async参数必须设置为true：

xmlhttp.open("GET","ajax_test.html",true);

通过 AJAX，JavaScript 无需等待服务器的响应，而是：在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理

注意：当使用 async=true时，请规定在响应处于onreadystatechange事件中的就绪状态时执行的函数
实例：

xmlhttp.onreadystatechange=function()
   {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
     }
   }
 xmlhttp.open("GET","ajax_info.txt",true);
 xmlhttp.send();

注意：当您使用 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 属性
实例：请求 cd_catalog.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;

源码：

<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
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)
    {
    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;
    }
  }
xmlhttp.open("GET","cd_catalog.xml",true);
xmlhttp.send();
}
</script>
</head>

<body>
<h2>My CD Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
</body>
</html>

七、onreadystatechange事件：

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当readyState改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：

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

（2）readyState ——存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

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

（3）status

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

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()
   {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
     }
   }

八、使用回调函数

回调函数是一种以参数形式传递给另一个函数的函数。
如果网站上存在多个 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;
     }
   });

源码：

<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// IE7+, Firefox, Chrome, Opera, Safari 代码
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6, IE5 代码
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/try/ajax/ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}
</script>
</head>
<body>

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

</body>
</html>

九、AJAX 数据库实例

下面的例子将演示网页如何通过 AJAX 从数据库读取信息

<html><!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
var xmlhttp;    
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
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("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form action=""> 
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>

</body>
</html>

当用户在上面的下拉列表中选择某个客户时，会执行名为 “showCustomer()” 的函数。该函数由 “onchange” 事件触发
showCustomer() 函数执行以下任务：
检查是否已选择某个客户
创建 XMLHttpRequest 对象
当服务器响应就绪时执行所创建的函数
把请求发送到服务器上的文件
请注意我们向 URL 添加了一个参数 q （带有输入域中的内容）

文本框根据服务器数据实时刷新：

<html><!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
var xmlhttp;
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
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("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<h3>Start typing a name in the input field below:</h3>
<form action=""> 
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p> 

</body>
</html>

源代码解析：
如果输入框为空 (str.length==0)，则该函数清空txtHint占位符的内容，并退出函数。
如果输入框不为空，showHint() 函数执行以下任务：
创建XMLHttpRequest 对象
当服务器响应就绪时执行函数
把请求发送到服务器上的文件
请注意向URL添加了一个参数q （带有输入框的内容）

f555f

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX学习笔记

一、AJAX是什么：AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 是在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。二、XMLHttpRequest1、介绍：XMLHttpRequest 是 AJAX 的基础。 XMLHttpR
复制链接

扫一扫