AJAX – 记录笔记

AJAX 笔记

对于 AJAX 的一些常用代码的记录,方便查找学习!AJAX需要在本地环境中测试学习。

写法一 常规写法

function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// 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.txt",true);
	xmlhttp.send();
}
//HTML ————————————————————————————————————————————》
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

写法二:单独函数调用

var xmlhttp;
function xaingfun(url,newfun){
	if(window.XMLHttpRequest){
		xmlhttp = new XMLHttpRequest();
	}else{
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange = newfun;
	xmlhttp.open("GET",url,true);
	xmlhttp.send();
}
function dianji(){
	xaingfun("ajax.txt",function(){
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
		document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
		}
	})
}
//HTML ————————————————————————————————————————————》
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="dianji()">修改内容</button>

写法3:ASP/PHP 单独调用

function xie(str){
	var xmlhttp;
	if(str.length == 0){
		document.getElementById("tishi").innerHTML=" ";
		return;
	}
	if (window.XMLHttpRequest) {
		xmlhttp = new XMLHttpRequest();
	}else{
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function(){
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
			document.getElementById("tishi").innerHTML = xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","run.php?q="+str,true);
	xmlhttp.send();
}
//HTML ————————————————————————————————————————————》
<input id="nei" type="" name="" placeholder="输入内容" onkeyup="xie(this.value)">
<p id="tishi"></p>
//run.php PHP文件代码 ————————————————————————————————————————————》
<?php
// Fill up array with names
$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";

//get the q parameter from URL
$q=$_GET["q"];

//lookup all hints from array if length of 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];
      }
    }
  }
}

// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
  $response="no suggestion";
}
else
{
  $response=$hint;
}

//output the response
echo $response;
?>

AJAX 常规语法

function AJAX(){
	var ajaxhttp;
	if(window.XMLHttpRequest){
		ajaxhttp = new XMLHttpRequest();
	}else{
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	ajaxhttp.onreadystatechange = function(){
		if (ajaxhttp.readyState == 4 && ajaxhttp.status == 200) {
			// 执行的函数 有responseTexh 与 responseXML
		}
	}
	ajaxhttp.open("请求方式","请求文件",异步或同步);请求方式:GET and POST,异步:true 同步:false
	ajaxhttp.send();
}

服务器常用的状态码

200:服务器响应正常。
304:该资源在上次请求之后没有任何修改(这通常用于浏览器的缓存机制,使用GET请求时尤其需要注意)。
400:无法找到请求的资源。
401:访问资源的权限不够。
403:没有权限访问资源。
404:需要访问的资源不存在。
405:需要访问的资源被禁止。
407:访问的资源需要代理身份验证。
414:请求的URL太长。
500:服务器内部错误。

实例测试

实例1

使用 AJAX 修改该文本内容


实例2

标签