基于PHP的AJAX学习笔记

这是本人在学习ajax过程所做的笔记，通过本笔记的学习，可以完成ajax的快速入门。本笔记前端分别使用原生态的javascript语言和jQuery语言，服务器端使用PHP语言。

一、基础知识
1、创建XMLHttpRequest对象（不同的浏览器获取XMLHttpRequest方法不同）
//创建ajax引擎
function getXMLHttpRequest() {
var xmlhttp;
try {
//Firefox,Opera 8.0+, Safari
xmlhttp = new XMLHttpRequest();
}catch (e) {
//Internet Explorer
try {
xmlhttp = new ActiveXObject(“Msxml12.XMLHTTP”);
}catch (e) {
try {
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}catch (e) {
alert(“您的浏览器不支持AJAX！”);
return false;
}
}
}
return xmlhttp;
}
2、调用XMLHttpRequest对象的open(method,url,async)方法，打开链接。open方法的三个参数：第一个为请求类型，GET或POST；第二个参数为所要请求的URL地址；第三个参数为是否采用异步机制，true（异步）或false（同步）
3、调用XMLHttpRequest对象的
xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”)方法添加HTTP头，这个方法多用在以POST方法提交数据时。
4、调用XMLHttpRequest对象的onreadystatechange属性，指定回调函数
5、调用XMLHttpRequest对象的send()方法，发送请求，在GET方式中，通常将所要传递的参数显示的加载url后面，在POST方式中，将数据作为参数传入，两个参数之间用&分割，例如：xmlhttp.send(“key1=value1&key2=value2”);
6、在指定的回调函数里面取出服务器返回的值，回调函数会被触发四次，因为状态发生了四次变化，可以通过判断readyState属性的值判断状态，然后根据返回信息的格式，取出返回的数据
7、当以POST方式请求时，除了send()的参数不同外，还需要设置响应头部的信息setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
8、处理返回格式是xml的数据处理时，在服务端要用header(“Content-Type:text/xml;charset=utf-8”);语句设置返回格式为xml
9、在返回xml数据格式时，服务器端返回的是xml对象，通过XML DOM解析
10、在返回json数据格式时，服务器端返回的是一个字符串，需要调用javascript的eval()函数来执行，并返回真正的json对象
11、eval函数的具体使用:var json_obj = eval(“(”+xmlhttp.responseText+”)”);
12、json的几种格式：
基本格式
例子
“{属性名：属性值，属性名：属性值……}”

[
{名称1：值1，名称2：值2，……}
{名称1：值1，名称2：值2，……}

扩展格式

13、三种格式的对比

文本格式
1、数据量小，但不需要和其他程序通信时较为适用
XML格式
1、格式通用能够和其他应用程序通信
2、当远程应用程序未知的时候是首选
JSON格式
1、原生态数据，描述能力强，数据结构简单
2、格式要求严格
3、元素的数据类型可以是int，string，float，boolean，array，object等基本数据格式
4、eval函数有一定的风险
5、如果无特殊需求推荐使用
14、如果我们的代码比较复杂，可以使用file_put_contents函数，将数据输出到日志文件进行查看，调试

二、示例程序
1、使用ajax完成无刷新的注册界面
1.1两个页面，注册页面和注册处理页面
1.2当用get方式提交数据（URL）的时候，如果两次提交的数据完全相同，则并不是真的发送请求，而是从缓存中取出上次的数据，碰到这样的情况，有两种方式解决：
第一种，在客户端可以通过添加时间戳等方式，迫使每次提交的数据都有不同，避免浏览器的过度智能所造成的页面数据不更新的情况；
第二种，在服务器端禁用缓存的方式，在服务器端加上header(“Cache-Control:no-cache”);
1.3如果想实现在输入框中边输入，边验证的效果，需要给输入框加上onkeyup事件的处理
1.4返回文本方式的源代码
index.php（注册页面）完整代码

1.5返回json格式的源代码
index.php（注册页面）核心修改代码
//处理函数
function chuli() {
//alert(“处理函数被调用”+xmlhttp.readyState);
//取出从服务器返回的数据
if (xmlhttp.readyState == 4) {
//取出值，根据返回信息的格式而定
//取出json文本格式
var msg = xmlhttp.responseText;
//将字符串转换成json对象
var json_obj = eval(“(“+msg+”)”);
//取出json对象的属性
$(“myres”).value = json_obj.res;
}
}
register.php（注册处理页面）

2、省市联动
2.1根据选择的上级行政区域，动态加载下一级行政区域并显示，比如选择省之后，动态加载该省的所有市，依次类推
2.2两个页面，一个下拉列表界面，一个信息处理界面

2.3返回XML形式数据的源代码
index.php（下拉列表界面）

provinces.php（信息处理页面）
<?php
//设置返回的格式
header(“Content-Type:text/xml;charset=utf-8”);
//设置禁用缓存
header(“Cache-Control:no-cache”);
//接收客户端数据
$province = $_POST[‘province’];
$info=””;
if ($province == “sichuan”) {
$info=”成都广元绵阳”;
}elseif ($province == “gansu”) {
$info=”兰州武威酒泉”;
}else {
$info=”—市—”;
}

echo $info;
?>

2.4返回JSON数据格式（前台用JQuery的load方式提交）
index.php（下拉列表页）

provinces.php（信息处理页） echo $info;
?>

2.5返回XML数据格式（前台用JQuery的$.get()方式提交）
index.php

provinces.php 成都广元绵阳”; }elseif ($province == “gansu”) { //$info='[{“city_value”:”lanzhou”,”city_name”:”兰州”},{“city_value”:”wuwei”,”city_name”:”武威”},{“city_value”:”jiuquan”,”city_name”:”酒泉”}]’; $info = “兰州武威酒泉”; }else { //$info='[{“city_value”:””,”city_name”:”—市—“}]’; $info = “—市—”; }

echo $info;
?>

2.6返JSON数据格式（前台用JQuery的$.post()方式提交）
index.php

provinces.php 成都广元绵阳”; } elseif ($province == “gansu”) { $info='[{“city_value”:”lanzhou”,”city_name”:”兰州”},{“city_value”:”wuwei”,”city_name”:”武威”},{“city_value”:”jiuquan”,”city_name”:”酒泉”}]’; // $info = “兰州武威酒泉”; } else { $info='[{“city_value”:””,”city_name”:”—市—“}]’; // $info = “—市—”; }

echo $info;
?>

3、天气预报查询
3.1使用中国国家气象局天气预报信息接口查询全国各地的天气情况
3.2使用ajax方式动态加载省市信息，异步无刷新查询天气预报
3.3使用php发送跨域请求，获取国家气象局信息接口返回的json信息，并将其做为ajax请求响应报文返回给前台页面
3.4源代码
index.php（信息展示页）