本地测试AJAX请求

要在本地测试AJAX，首先是环境的搭建，因为XHR对象的open方法中参数url是指文件在服务器上的文件。下面以WampServer为例。

1. 下载wamp的安装包，下载地址为：http://221.181.72.84/softdl.360tpcdn.com/WampServer/WampServer_2.5.exe

2.安装wamp。按照步骤安装即可。

3.安装完wamp后，双击桌面上wamp的快捷方式启动wamp。

如果wamp正常启动后，任务栏右下角有绿色的图标：

接下来以W3C的几个完整的测试代码为例。

测试实例1：

ajax.html代码为：

<html>

<head>

<script type="text/javascript">

function showHint(str)//当用户在输入框中键入字符时，会执行函数“showHint（）”，该函数由“onkeyup”事件触发；

{

var xmlhttp;

if (str.length==0)

  {

  document.getElementById("txtHint").innerHTML="";

  return;

  }//如果输入框为空（str.length==0），则该函数清空txtHint占位符的内容，并退出函数；

if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5

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

  }

xmlhttp.open("GET","http://localhost/my/php/gethint.php?q="+str,true);

xmlhttp.send();

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

    }

  }

}//如果输入框不为空，showHint（）函数执行以下任务：1.创建XHR对象 2.把请求发送到服务器上的文件 3.当服务器响应就绪时执行函数 4.注意我们向url添加了一个函数q（带有输入框的内容）；

</script>

</head>

<body>

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

<form action="">

姓氏：<input type="text" id="txt1" onkeyup="showHint(this.value)" />

</form>

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

</body>

</html>

gethint.php代码为：

<?php

// 用名字来填充数组

$a[]="Anna";

$a[]="Brittany";

$a[]="Cinderella";

$a[]="Diana";

$a[]="Eva";

$a[]="Fiona";

$a[]="Gunda";

$a[]="Hege";

$a[]="Inga";

$a[]="Johanna";

$a[]="Kitty";

$a[]="Linda";

$a[]="Nina";

$a[]="Ophelia";

$a[]="Petunia";

$a[]="Amanda";

$a[]="Raquel";

$a[]="Cindy";

$a[]="Doris";

$a[]="Eve";

$a[]="Evita";

$a[]="Sunniva";

$a[]="Tove";

$a[]="Unni";

$a[]="Violet";

$a[]="Liza";

$a[]="Elizabeth";

$a[]="Ellen";

$a[]="Wenche";

$a[]="Vicky";

//获得来自 URL 的 q 参数

$q=$_GET["q"];

//如果 q 大于 0，则查找数组中的所有提示

if (strlen($q) > 0)

  {

  $hint="";

  for($i=0; $i<count($a); $i++)

    {

    if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))

      {

      if ($hint=="")

        {

        $hint=$a[$i];

        }

      else

        {

        $hint=$hint." , ".$a[$i];

        }

      }

    }

  }

// 如果未找到提示，则把输出设置为 "no suggestion"

// 否则设置为正确的值

if ($hint == "")

  {

  $response="no suggestion";

  }

else

  {

  $response=$hint;

  }

//输出响应

echo $response;

?>

最后把HTML文件和php文件保存在wamp安装目录下www文件夹下相同的目录下（我的是php文件夹）:

然后通过本地服务器打开html文件（比如我的是http://localhost/my/php/ajax.html）:

测试实例2：

xml.html代码：

<html>

<head>

<script type="text/javascript">

function loadXMLDoc(url)

{

var xmlhttp;

var txt,x,xx,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)

    {

    txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";

    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");

    for (i=0;i<x.length;i++)

      {

      txt=txt + "<tr>";

      xx=x[i].getElementsByTagName("TITLE");

        {

        try

          {

          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";

          }

        catch (er)

          {

          txt=txt + "<td> </td>";

          }

        }

      xx=x[i].getElementsByTagName("ARTIST");

        {

        try

          {

          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";

          }

        catch (er)

          {

          txt=txt + "<td> </td>";

          }

        }

      txt=txt + "</tr>";

      }

    txt=txt + "</table>";

    document.getElementById('txtCDInfo').innerHTML=txt;

    }

  }

xmlhttp.open("GET",url,true);

xmlhttp.send();

}

</script>

</head>

<body>

<div id="txtCDInfo">

<button onclick="loadXMLDoc('http://localhost/my/php/cd_catalog.xml')">获得 CD 信息</button>

</div>

</body>

</html>

　cd_catalog.xml代码为：

<CATALOG>

<CD>

<TITLE>Empire Burlesque</TITLE>

<ARTIST>Bob Dylan</ARTIST>

<COUNTRY>USA</COUNTRY>

<COMPANY>Columbia</COMPANY>

<PRICE>10.90</PRICE>

<YEAR>1985</YEAR>

</CD>

<CD>

<TITLE>Hide your heart</TITLE>

<ARTIST>Bonnie Tyler</ARTIST>

<COUNTRY>UK</COUNTRY>

<COMPANY>CBS Records</COMPANY>

<PRICE>9.90</PRICE>

<YEAR>1988</YEAR>

</CD>

<CD>

<TITLE>Greatest Hits</TITLE>

<ARTIST>Dolly Parton</ARTIST>

<COUNTRY>USA</COUNTRY>

<COMPANY>RCA</COMPANY>

<PRICE>9.90</PRICE>

<YEAR>1982</YEAR>

</CD>

<CD>

<TITLE>Still got the blues</TITLE>

<ARTIST>Gary Moore</ARTIST>

<COUNTRY>UK</COUNTRY>

<COMPANY>Virgin records</COMPANY>

<PRICE>10.20</PRICE>

<YEAR>1990</YEAR>

</CD>

<CD>

<TITLE>Eros</TITLE>

<ARTIST>Eros Ramazzotti</ARTIST>

<COUNTRY>EU</COUNTRY>

<COMPANY>BMG</COMPANY>

<PRICE>9.90</PRICE>

<YEAR>1997</YEAR>

</CD>

<CD>

<TITLE>One night only</TITLE>

<ARTIST>Bee Gees</ARTIST>

<COUNTRY>UK</COUNTRY>

<COMPANY>Polydor</COMPANY>

<PRICE>10.90</PRICE>

<YEAR>1998</YEAR>

</CD>

<CD>

<TITLE>Sylvias Mother</TITLE>

<ARTIST>Dr.Hook</ARTIST>

<COUNTRY>UK</COUNTRY>

<COMPANY>CBS</COMPANY>

<PRICE>8.10</PRICE>

<YEAR>1973</YEAR>

</CD>

<CD>

<TITLE>Maggie May</TITLE>

<ARTIST>Rod Stewart</ARTIST>

<COUNTRY>UK</COUNTRY>

<COMPANY>Pickwick</COMPANY>

<PRICE>8.50</PRICE>

<YEAR>1990</YEAR>

</CD>

<CD>

<TITLE>Romanza</TITLE>

<ARTIST>Andrea Bocelli</ARTIST>

<COUNTRY>EU</COUNTRY>

<COMPANY>Polydor</COMPANY>

<PRICE>10.80</PRICE>

<YEAR>1996</YEAR>

</CD>

<CD>

<TITLE>When a man loves a woman</TITLE>

<ARTIST>Percy Sledge</ARTIST>

<COUNTRY>USA</COUNTRY>

<COMPANY>Atlantic</COMPANY>

<PRICE>8.70</PRICE>

<YEAR>1987</YEAR>

</CD>

<CD>

<TITLE>Black angel</TITLE>

<ARTIST>Savage Rose</ARTIST>

<COUNTRY>EU</COUNTRY>

<COMPANY>Mega</COMPANY>

<PRICE>10.90</PRICE>

<YEAR>1995</YEAR>

</CD>

<CD>

<TITLE>1999 Grammy Nominees</TITLE>

<ARTIST>Many</ARTIST>

<COUNTRY>USA</COUNTRY>

<COMPANY>Grammy</COMPANY>

<PRICE>10.20</PRICE>

<YEAR>1999</YEAR>

</CD>

<CD>

<TITLE>For the good times</TITLE>

<ARTIST>Kenny Rogers</ARTIST>

<COUNTRY>UK</COUNTRY>

<COMPANY>Mucik Master</COMPANY>

<PRICE>8.70</PRICE>

<YEAR>1995</YEAR>

</CD>

<CD>

<TITLE>Big Willie style</TITLE>

<ARTIST>Will Smith</ARTIST>

<COUNTRY>USA</COUNTRY>

<COMPANY>Columbia</COMPANY>

<PRICE>9.90</PRICE>

<YEAR>1997</YEAR>

</CD>

<CD>

<TITLE>Tupelo Honey</TITLE>

<ARTIST>Van Morrison</ARTIST>

<COUNTRY>UK</COUNTRY>

<COMPANY>Polydor</COMPANY>

<PRICE>8.20</PRICE>

<YEAR>1971</YEAR>

</CD>

<CD>

<TITLE>The very best of</TITLE>

<ARTIST>Cat Stevens</ARTIST>

<COUNTRY>UK</COUNTRY>

<COMPANY>Island</COMPANY>

<PRICE>8.90</PRICE>

<YEAR>1990</YEAR>

</CD>

<CD>

<TITLE>Stop</TITLE>

<ARTIST>Sam Brown</ARTIST>

<COUNTRY>UK</COUNTRY>

<COMPANY>A and M</COMPANY>

<PRICE>8.90</PRICE>

<YEAR>1988</YEAR>

</CD>

<CD>

<TITLE>Bridge of Spies</TITLE>

<ARTIST>T'Pau</ARTIST>

<COUNTRY>UK</COUNTRY>

<COMPANY>Siren</COMPANY>

<PRICE>7.90</PRICE>

<YEAR>1987</YEAR>

</CD>

<CD>

<TITLE>Private Dancer</TITLE>

<ARTIST>Tina Turner</ARTIST>

<COUNTRY>UK</COUNTRY>

<COMPANY>Capitol</COMPANY>

<PRICE>8.90</PRICE>

<YEAR>1983</YEAR>

</CD>

<CD>

<TITLE>Midt om natten</TITLE>

<ARTIST>Kim Larsen</ARTIST>

<COUNTRY>EU</COUNTRY>

<COMPANY>Medley</COMPANY>

<PRICE>7.80</PRICE>

<YEAR>1983</YEAR>

</CD>

<CD>

<TITLE>Pavarotti Gala Concert</TITLE>

<ARTIST>Luciano Pavarotti</ARTIST>

<COUNTRY>UK</COUNTRY>

<COMPANY>DECCA</COMPANY>

<PRICE>9.90</PRICE>

<YEAR>1991</YEAR>

</CD>

<CD>

<TITLE>The dock of the bay</TITLE>

<ARTIST>Otis Redding</ARTIST>

<COUNTRY>USA</COUNTRY>

<COMPANY>Atlantic</COMPANY>

<PRICE>7.90</PRICE>

<YEAR>1987</YEAR>

</CD>

<CD>

<TITLE>Picture book</TITLE>

<ARTIST>Simply Red</ARTIST>

<COUNTRY>EU</COUNTRY>

<COMPANY>Elektra</COMPANY>

<PRICE>7.20</PRICE>

<YEAR>1985</YEAR>

</CD>

<CD>

<TITLE>Red</TITLE>

<ARTIST>The Communards</ARTIST>

<COUNTRY>UK</COUNTRY>

<COMPANY>London</COMPANY>

<PRICE>7.80</PRICE>

<YEAR>1987</YEAR>

</CD>

<CD>

<TITLE>Unchain my heart</TITLE>

<ARTIST>Joe Cocker</ARTIST>

<COUNTRY>USA</COUNTRY>

<COMPANY>EMI</COMPANY>

<PRICE>8.20</PRICE>

<YEAR>1987</YEAR>

</CD>

</CATALOG>

　运行结果：

以上。

本地测试AJAX请求的更多相关文章

本地测试ajax遇到的跨域问题
浏览器console问题描述:Cross origin requests are only supported for protocol schemes: http, data, chrome, ch ...
在本地测试一次成功的AJAX请求
要在本地测试AJAX,首先是环境的搭建,下面以wamp为例. 1.先在wamp的官网下载wamp的安装包,网址 http://www.wampserver.com/. 2.安装wamp.如果安装过程中 ...
配置Chrome启动参数支持本地AJAX请求，解决XMLHttpRequest cannot load file..,Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest':.. 问题
直接将本地的HTML文件拖拽到Chrome浏览器中运行时,发送的AJAX请求本地文件,会报跨域错误: 报错的原因是:Chrome默认不支持本地的AJAX请求! 解决问题的办法是:给Chrome浏览器添 ...
【学习篇：他山之石，把玉攻】Ajax请求安全性讨论
在开发过程中怎样考虑ajax安全及防止ajax请求攻击的问题. 先上两段网摘: Ajax安全防范的方法: 判断request的来源地址.这样的方式不推荐,因为黑客可以更改http包头,从而绕过检测. ...
Ajax请求安全性讨论
今天我们来讨论一下ajax请求的安全性,我相信各位在系统开发过程中肯定会绞尽脑汁的想怎样可以尽量少的防止伪造ajax请求进行攻击,尤其是开发跟用户交互比较多的互联网系统.那么就请大家来分享讨论一下你在 ...
Ajax请求安全性讨论 - Eric.Chen(转)
Ajax请求安全性讨论 - Eric.Chen 时间 2013-07-23 20:44:00 博客园-原创精华区原文 http://www.cnblogs.com/lc-chenlong/p/3 ...
配置chrome支持本地（file协议）ajax请求
将html代码拖拽进入chrome通过file协议浏览时,发送的ajax请求本地文件,会报跨域错误. XMLHttpRequest cannot load file:///E:/webs/extJS/ ...
ajax本地跨域请求以及解决方法
什么是跨域? 我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景.所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源,只要没 ...
webservice 测试窗体只能用于来自本地计算机的请求
Question: WebService部署成站点之后,如果在本地测试webservice可以运行,在远程却显示“测试窗体只能用于来自本地计算机的请求”或者"The test form is ...

随机推荐

CSS设置DIV背景色渐变
div{ width: 200px; height: 200px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=, ...
Maven学习链接
别人的资料很多且写的很详细,我这里先收藏,等学习到一定阶段且有时间再整理自己的积累. 1.eclipse安装maven插件方法: http://blog.csdn.net/kittyboy0001/a ...
听着好像很牛的特效——幽灵按钮DOM
给大家分享一个听着好像很牛的东西——幽灵按钮,这个玩意对于艺术设计细胞在高中决定不在考试试卷上画画的我来说,实在不感冒.但是这个按钮的设计元素很流行,一个网页东西不做几个,光放上几个按钮就会显得很高端 ...
CentOS_7.2服务器前期
一.禁用SELinux:# 永久禁用,需要重启生效: sed -i 's/SELINUX=enforcing/SELINUX=disabled/g' /etc/sysconfig/selinux se ...
SSM框架学习之高并发秒杀业务--笔记5-- 并发优化
前几节终于实现了这个高并发秒杀业务,现在问题是如何优化这个业务使其能扛住一定程度的并发量. 一. 优化分析对于整个业务来说,首先是分析哪些地方会出现高并发,以及哪些地方会影响到了业务的性能.可能会出 ...
java selenium (十) 操作浏览器
本篇文章介绍selenium 操作浏览器阅读目录浏览器最大化前进,后退, 刷新 public static void testBrowser(WebDriver driver) throws E ...
10.6 CCPC northeast
1001 Minimum's Revenge 点的编号从 1 到 n ,u v 的边权是 LCM(u,v) ,求这个图的最下生成树搞成一颗以 1 为根的菊花树 ---------------- ...
javascript无线端的判断
经常在工作中要求网页做这样的处理判断:针对无线端的网页,我们需要兼容一种异于PC端的网页效果. 如下代码就可以实现无线端的判断: var mobs = ['android', 'ipad', 'ipo ...
BlackBerry 9900刷机
1.安装BlackBerry Desktop Software: 2.安装ROM,双击9900Asia_PBr7.1.0_rel2807_PL5.1.0.692_A7.1.0.1033_China_M ...
编译OpenJDK的笔记
1. ERROR: You seem to not have installed ALSA 0.9.1 or higher. 不需要从ALSA官网下载alsa-dev和alsa-drive, ubu ...

本地测试AJAX请求

本地测试AJAX请求的更多相关文章

随机推荐

热门专题