AJAX是什么？

最新推荐文章于 2022-08-02 21:52:40 发布

JMission

最新推荐文章于 2022-08-02 21:52:40 发布

阅读量535

点赞数

分类专栏： JS 文章标签： ajax 异步 js xmlhttprequest getpost

本文链接：https://blog.csdn.net/JMission/article/details/42235815

版权

JS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

最近对于Ajax比较感兴趣，所以就学习了一番，学习的一些总结和想法呈现给大家，以供大家学习的时候参考。

AJAX概述

Ajax全称是Asynchronous JavaScript and XML，也就是异步的 JavaScript 和 XML。

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

AJAX XHR

XHR 即 XMLHttpRequest 用于在后台与服务器交换数据。

//创建XHR对象的方法
variable = new XMLHttpRequest();

由于IE5和IE6不支持XHR，我们创建XHR的方法改成：

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

<span style="font-family: Arial, Helvetica, sans-serif;">//当xmlhttp处于 onreadystatechange 的状态时执行函数</span>

<pre name="code" class="javascript">//此函数为通用函数，只需要修改"#id"就可以用

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

点评：xmlhttp.open()函数有三个参数：method,url,async,规定请求的类型、URL 以及是否异步处理请求。

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

xmlhttp.send(string)函数：将请求发送到服务器。

string：仅用于 POST 请求

GET 还是 POST？

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

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

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

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

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

点评：setRequestHeader( header, value)：向请求添加 HTTP 头。

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

AJAX 服务器响应

通过XMLHttpRequest 对象的 responseText 或 responseXML 属性来获得服务器的返回数据

AJAX onreadystatechange 事件

xhr对象有三个重要的属性：

1、onreadystatechange 存储函数，当xhr状态readyState发生改变时，便调用该函数。

2、readyState 存储xhr的状态，从0到4：

0-请求未初始化

1-服务器连接已建立

2-请求已接收

3-请求处理中

4-请求已完成，且响应已就绪

3、Status 200: "OK"; 404: 未找到页面

AJAX 实例

1、Google Suggest 搜索引擎推荐

<html>
<head>
<pre name="code" class="javascript"><script type="text/javascript">
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","/ajax/gethint.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>

<body>

<h3>请在下面的输入框中键入字母（A - Z）：</h3>

<form action=""> 姓氏：

<input type="text" id="txt1" οnkeyup="showHint(this.value)" />

</form><p>建议：<span id="txtHint"></span></p>

</body>

</html>

<pre name="code" class="html">显示结果：如下图;

<img src="https://img-blog.csdn.net/20141229120447061?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSk1pc3Npb24=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);" />

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">
</span>

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">点评：这个案例是在用户抬起键盘时向后台发送xhr，实现实时的查询功能。我们注意到（※）onkeyup属性绑定了一个函数，每次键盘抬起来的时候都执行这个函数，传入参数为此文本框的输入值this.value。xmlhttp.open("GET","/ajax/gethint.asp?q="+str,true);请求url中追加了this.value。</span>

2、Ajax 请求数据库

<pre name="code" class="html"><html>
<head>
<pre name="code" class="javascript"><script type="text/javascript">
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","/ajax/getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>

<body>

<span style="white-space:pre">	</span><form action="" style="margin-top:15px;"> <label>请选择一位客户：

<span style="white-space:pre">	</span><select name="customers" οnchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">

<span style="white-space:pre">		</span><option value="APPLE">Apple Computer, Inc.</option>

<span style="white-space:pre">		</span><option value="BAIDU ">BAIDU, Inc</option>

<span style="white-space:pre">		</span><option value="Canon">Canon USA, Inc.</option>

<span style="white-space:pre">		</span><option value="Google">Google, Inc.</option>

<span style="white-space:pre">		</span><option value="Nokia">Nokia Corporation</option>

<span style="white-space:pre">		</span><option value="SONY">Sony Corporation of America</option>

<span style="white-space:pre">	</span></select>

<span style="white-space:pre">	</span></label>

<span style="white-space:pre">	</span></form><br />

<div id="txtHint">客户信息将在此处列出 ...</div>

</body>

</html>

显示：如下图

点评：我们注意到程序用了<select name="" οnchange="function()" ><option value=""></option></select> 同样将this.value（选择的值）传参给服务器，来获取数据。xmlhttp.open("GET","/ajax/gethint.asp?q="+str,true);代码几乎相同。

学习告一段落……

后记：因为JSON这种轻量级的数据交换格式的出现，使得通过xml交换数据的用途越来越少，所以在这里我没有深入学习xml的知识，那么我之前写过几篇关于JSON的学习，还是可以参考的……

JMission

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX是什么？

最近对于Ajax比较感兴趣，所以就学习了一番，学习的一些总结和想法呈现给大家，以供大家学习的时候参考。AJAX概述Ajax全称是Asynchronous JavaScript and XML，也就是异步的 JavaScript 和 XML。AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新。也就是可以在不重新加载整个网页的情况下，对网页的某部分进行更新。AJAX XH
复制链接

扫一扫