一个简单的ajax实例

最新推荐文章于 2019-09-17 09:33:43 发布

LeeLin

最新推荐文章于 2019-09-17 09:33:43 发布

阅读量1.1k

点赞数

分类专栏： ASP.NET/C# 文章标签： ajax xmlhttprequest 服务器 microsoft function mozilla

ASP.NET/C# 专栏收录该内容

91 篇文章 0 订阅

订阅专栏

一个简单的异步请求的例子，很简单自己看吧：

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type='text/javascript' src='quickstart.js'></script>
<title>Ajax with PHP: Quickstart</title>
</head>
<body>
Server wants to know your name:<input type='text' id='myName' value='' οnchange='process()'>
<div id='message'></div>
Server wants to know your fullName<input type='text' id='myFullName' value=''>
</body>
</html>

quickstart.js:

//初始化xmlHttpRequest对象
var xmlHttpRequest = createXmlHttpRequestObject();

//使用xmlHttpRequest发送异步请求
function process()
{
//在xmlHttpRequest对象不忙时进行处理
if(xmlHttpRequest.readyState == 4 || xmlHttpRequest.readyState == 0)
{
  //获得表单中输入的用户名字
  name = encodeURIComponent(document.getElementById('myName').value);
  //在服务器端执行quickstart.php
  xmlHttpRequest.open('GET','quickstart.php?name=' + name,true);
  //定义处理服务器端返回相应的函数
  xmlHttpRequest.onreadystatechange = handleServerResponse;
  //向服务器发送请求
  xmlHttpRequest.send(null);
}
else
{
  //如果服务器繁忙，1秒钟后重试
  setTimeout('process()',1000);
}
}

//当收到服务器端的相应的时候自动执行
function handleServerResponse()
{
//在处理结束时进入下一步
if(xmlHttpRequest.readyState == 4)
{
  //状态为200表示处理成功结束
  if(xmlHttpRequest.status == 200)
  {
   //获得服务器端发出的xml请求
   xmlResponse = xmlHttpRequest.responseXML;
   //获得XML中的文档对象
   xmlDocumentElement = xmlResponse.documentElement;
   //获得第一个文档对象的文本信息，第一个孩子节点
   helloMessage = xmlDocumentElement.firstChild.data;
   //使用从服务器端发送的消息更新客户端显示的内容
   document.getElementById('message').innerHTML = '<i>' + helloMessage + '</i>';

   //1秒钟后重新开始
   //setTimeout('process()',1000);
  }

  //如果HTTP的状态不是200表示出错
  else
  {
   alert('There was a problem accessing the server: ' + xmlHttpRequest.statusText);
  }
}
}

quickstart.php:

<?php

//创建一个XML格式的输出
header('Content-Type: text/xml');
//创建XML头
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';
//创建<response>元素
echo '<response>';

//获取姓名
$name = $_GET['name'];
//根据从客户端获取的用户名创建输出
$userNames = array('JASHON','BOM','MICROSOFT','AMD','SUN','INTEL');
if(in_array(strtoupper($name),$userNames))

  echo 'Hello,master '.htmlentities($name).'!';
else if(trim($name == ''))
  echo 'Stranger,please tell me your name!';
else
  echo htmlentities($name).', I don//'t know you!';
//关闭response标签
echo '</response>';