📖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

修改内容(点我试试)
实例2