Ajax基础知识 浅析（含php基础语法知识）
1.php基础语法 后缀名为.php的文件
（1） echo 向页面中输入字符串
<?php 所有php相关代码都要写在<?php ?>这个标签之中
echo "<div>Hello World!</div>";
?>
（2） $ 变量声明 如果只声明不赋值，会报错
<?php
$num=123;
echo $num;
echo "<div>编号为:".$num."</div>";
echo '<div>编号为:.$num.</div>';
?>
1) 变量的声明使用$符 由字符数字下划线组成，不可以数字开头，区分大小写
2) 字符串拼接使用.（点语法）区别于js中的+语法
3) “ ”双引号中的变量会被解析成变量，但在单引号中会被解析成字符串
（3） print_r() 数组、对象输出
<?php
$arr=array("Tom","Jack","Lily","Lucy");
print_r ($arr); 输出数组
echo “<br>”; 换行
echo $arr[0]; 打印数组的值，返回Tom
?>
输出结果入下：
Array ( [0] => Tom [1] => Jack [2] => Lily [3] => Lucy )
[ ]中为数组的索引值，=>后为其对应的值
定义字符串为索引的数组：
$arr2=array("name"=>"Tom","age"=>"18","gender"=>"male");
print_r ($arr2);
输出结果为：
Array ( [name] => Tom [age] => 18 [gender] => male )
（4） var_dump () 输出详细信息
$arr2=array("name"=>"Tom","age"=>"18","gender"=>"male");
var_dump($arr2);
array (size=3)
'name' => string 'Tom' (length=3)
'age' => string '18' (length=2)
'gender' => string 'male' (length=4)
（5）多维数组（二维数组为例）
<?php
$arr=array();
$arr[0]=array(1,2,3);
$arr[1]=array(4,5,6);
$arr[2]=array(7,8,9);
print_r($arr);
?>
输出结果入下：
Array (
[0] => Array ( [0] => 1 [1] => 2 [2] => 3 )
[1] => Array ( [0] => 4 [1] => 5 [2] => 6 )
[2] => Array ( [0] => 7 [1] => 8 [2] => 9 )
)
（6） gettype( )获取传入对象的数据类型
<?php
$str="array()";
echo gettype($str); 返回string
?>
（7）循环遍历
for循环 count()用于计算数组的长度
<?php
$arr=array(123,456,789);
for($i=0;$i<count($arr);$i++){ count($arr)等同于arr.length
echo $arr[$i]."<br>";
}
?>
foreach循环，两种表达形式
<?php
$arr=array(123,456,789);
foreach($arr as $value){ 直接取值
echo $value."<br>";
}
?>
<?php
$arr=array(123,456,789);
foreach($arr as $key =>$value){ 键值对取值
echo $key."-----".$value."<br>";
}
?>
（8）函数定义
自定义函数示例：预解析过程和js相同
<?php
function Foo（大写）($info){ 在php中函数名不区分大小写
return $info;
}
$res=foo（小写）("Hello"); 在php中函数名不区分大小写
echo $res;
?>
系统json_encode( )函数：将数组或对象转换成json类型字符串
<?php
$arr=array("name"=>"Tom","age"=>"18","gender"=>"male");
$res=json_encode($arr);
echo gettype($res); 输出结果为string
echo "<br>".$res;
?>
浏览器输出：{"name":"Tom","age":"18","gender":"male"} 数据类型为字符串
（9） $_GET[ ]请求 会把表单数据作为url的参数
一般用来从服务器获取数据，会显示在浏览器的地址栏，也用于收集来自 method="get" 的表单中的值
<?php
$f=$_GET["flag"];
if($f==1){
echo "得到数据";
}else{
echo "未得到数据";
}
?>
http://localhost/text.php?flag=1
在浏览器地址栏输入上述地址，返回得到数据，如果输入其他，则返回未得到数据，flag=1是php中设置的条件
（10） $_POST[ ]请求 不会在url中显示数据，传输数据量大于GET
一般用来添加数据，收集带有 POST 方法的表单发送的信息，不会显示在浏览器的地址栏，并且对发送信息的量也没有限制
<div>
<form action="./text.php" method="post">
用户名：<input type="text" name="username"><br>
密码：<input type="text" name="password">
<input type="submit" value="登录">
</form>
</div>
php页面：
<?php
$uname=$_POST["username"]; 根据表单中的name属性获取值
$passw=$_POST["password"];
header("Content-Type:text/plain; charset=utf-8");
设置服务器响应的文件类型，设置成text/html标签数据可解析成html格式
if($uname=="admin"&&$passw=="123"){
echo "登录成功";
}else{
echo "登录失败，用户名或密码错误";
}
?>
（11）输入考号查询成绩，输入admin查询所有成绩案例
<div>
<form action="./text.php" method="post">
考号：<input type="text" name="code"><br>
<input type="submit" value="登录">
</form>
</div>
php页面：
<?php
$arr=array();
$arr['123']=array("name"=>"Tom","chinese"=>"78","math"=>"88","PE"=>"77"); $arr['124']=array("name"=>"Jack","chinese"=>"68","math"=>"78","PE"=>"57"); $arr['125']=array("name"=>"Jim","chinese"=>"71","math"=>"93","PE"=>"80"); $arr['126']=array("name"=>"Lily","chinese"=>"94","math"=>"70","PE"=>"68");
$code=$_POST['code'];
if($code=="admin"){
foreach ($arr as $value) { 输入admin循环遍历所有成绩输出
echo "<ul>
使用双引号””变量在其中还是解析成变量，不会解析成字符串
<li>姓名:$value[name]</li>
<li>语文: $value[chinese]</li>
<li>数学: $value[math]</li>
<li>语文: $value[PE]</li>
</ul>";
}
}else{
$score=$arr[$code]; 输入考号输出对应的成绩
echo "<ul>
使用双引号””变量在其中还是解析成变量，不会解析成字符串
<li>姓名: $score[name]</li>
<li>语文: $score[chinese]</li>
<li>数学: $score[math]</li>
<li>语文: $score[PE]</li>
</ul>";
}
?>
2.Ajax基础知识
（1）传统局部更新隐藏帧做法<iframe>
<div>
<form action="./text.php" method="post" target="myframe">
用户名:<input type="text" name="username"><br>
密码:<input type="text" name="password"><br>
<input type="submit" value="登录">
</form>
</div>
<iframe> name="myframe"></iframe>
php页面：
<?php
$uname=$_POST["username"];
$passw=$_POST["password"];
if($uname=='admin'&&$passw=='123'){
echo "登录成功";
}
?>
提交登录名和密码后页面不会跳转，会在HTML页面的<iframe>标签中输出“登录成功”
改进代码：使用<span>接收<iframe>的输出内容，同时隐藏<iframe>标签，显示登录失败提示
<div>
<form action="./text.php" method="post" target="myframe">
用户名:<input type="text" name="username">
<span id="info"></span><br>
密码:<input type="text" name="password"><br>
<input type="submit" value="登录">
</form>
</div>
<iframe name="myframe" height="0" width="0" frameborder="0"></iframe>
php页面：
<?php
$uname=$_POST["username"];
$passw=$_POST["password"];
if($uname=='admin'&&$passw=='123'){
?>
<script type="text/javascript">
parent.document.getElementById('info').innerHTML='登录成功';
</script>
<?php }else{ ?>
使用<?php ?>标签分离js代码与php代码，必须在<?php ?>标签中内容的前后都加上空格
<script type="text/javascript">
parent.document.getElementById('info').innerHTML='登录失败';
使用<iframe>标签的父元素来获取页面中的<span>标签
</script>
<?php } ?>
（2）Ajax实现页面的局部刷新 步骤解析见下节：（3）
<script>
window.onload = function () {
var btn = document.getElementById("btn");
btn.onclick = function () {
var uname = document.getElementById("username").value;
var passw = document.getElementById("password").value;
var xhr = new XMLHttpRequest();
console.log(xhr.readyState + "-------1"); 查看readState的值
xhr.open('get','./text.php?username=' + uname + '&password=' + passw,true);
xhr.send(null);
console.log(xhr.readyState + "-------2"); 查看readState的值
xhr.onreadystatechange = function () {
console.log(xhr.readyState + "-------3"); 查看readState的值
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = xhr.responseText;
var info = document.getElementById('info');
if (data == '1') {
info.innerHTML = '登录成功';
} else if (data == '2') {
info.innerHTML = '用户名或者密码错误';
}
}
}
}
}
}
</script>
php页面：
<?php
$uname=$_GET['username'];
$passw=$_GET['password'];
if($uname=='admin'&&$passw=='123'){
echo "1";
}else{
echo "2";
}
?>
（3）Ajax实现页面的局部刷新步骤详解（上述代码详解）
① xhr对象的兼容性封装(第一步创建xhr对象)xhr.XMLHttpRequest()
var xhr = new XMLHttpRequest();
兼容性封装：
var xhr = null;
if (window.XMLHttpRequest) { 如果有这个方法属性
xhr = new XMLHttpRequest(); 使用这个方法
} else {
xhr = new ActiveXObject("Microsoft"); 老版本IE的方法属性
}
不使用if-else，使用try-catch也可实现同样的效果：
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject("Microsoft");
}
②第二步准备发送xhr.open('get','./text.php?username=' + uname + '&password=' + passw,true);
open(‘get’, url , true)
open方法中有三个参数
‘get’参数一：请求发送的方式常用有四种( get获取数据，post提交数据，put修改数据，delete删除数据)，使用最频繁的是get和post
url参数二：请求地址，如果是get请求，那么请求参数必须在url中传递
例如案例中是get方式，所以使用拼接字符串的方法，将需要的username和password这两个请求参数传递在其中
案例中也可使用下述方法传递字符串：
var prama = 'username=' + uname + '&password=' + passw; 申明请求参数
xhr.open('get', './text.php?' + encodeURI(prama), true);
encodeURI方法对参数进行编码，可以防止传递中文出现乱码
如果是post请求，请求参数在第三步send()中传递，不用在open的url中传递
此处可以直接写xhr.open('get', './text.php’, true);
true参数三：同步或者异步标志位，默认是true表示异步，false表示同步
③第三步执行发送动作 xhr.send(null);
如果是get请求，send()中需要添加null，即不需要请求参数；
如果是post请求，send()中需要添加请求参数(var prama)，不需要encodeURI()进行转码，同时需要设置请求头，请求头必须设在open( )之后，否则会报错
在上述案例中应该写为：
设置请求头如下：
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send('username=' + uname + '&password=' + passw);
④第四步指定回调函数
xhr.onreadystatechange = function () {
该函数调用条件是readyState值发生变化（值不包括从0-1）
根据对xhr.readyState的监测一共会经历0,1,2,3,4五个值，打印结果如下：
var xhr = new XMLHttpRequest();
1. new XMLHttpRequest()对象创建完成：xhr.readyState == 0
xhr.send(null);
2.调用send()方法以后，表示已经发送了请求：xhr.readyState == 1
xhr.onreadystatechange = function (){}
3.浏览器已经收到了服务器相应的数据：xhr.readyState == 2
4.正在解析数据：xhr.readyState == 3
5.数据已经解析完成，可以使用，但数据不一定正常，需要通过status==200来判断：xhr.readyState == 4
if (xhr.readyState == 4) {
if (xhr.status == 200) {
status==200表示响应成功，数据是正常的
status==404表示没有找到资源
status==500表示服务器端错误
var data = xhr.responseText; 响应数据
var data = xhr.responseXML; 早期的数据格式，用标签包裹
XML格式数据示例代码如下：
<?xml version="1.0" encoding="utf-8" ?>
<booklist>
<book>
<name>西游记</name>
<author>吴承恩</author>
<desc>西天取经</desc>
</book>
<book>
<name>水浒传</name>
<author>施耐庵</author>
<desc>108条好汉</desc>
</book>
</booklist>
解析XML格式的数据直接使用DOM操作即可，示例如下：
var data = xhr.responseXML
var bookList = data.getElementsByTagName(“booklist”);
var books = booklist[0].children;
var name = book[0].children[0].innerHTML;
通过上述方式可以获取XML格式的数据
使用php处理XML文件需要添加响应头，告诉浏览器需要以什么格式解析
header(“Content-Type:text/xml;”);如果没有添加默认为html响应头
<?php
header("Content-Type:text/xml;");
?>
}
}
}
（4）json数据格式 数据没有变量，键必须用””双引号包裹
{
"name":"Tom",
"age":18,
"hobby":["coding","swimming","singing"],
"body":{"high":"180cm","weight":"80kg"}
}
var str = '{"name":"Tom","age":20}';
var obj=JSON.parse(str); 将json格式字符串转换成对象，使用eval转换存在安全隐患，有可能传入大段具有执行能力的代码
在php中使用json_encode($... )将数据转换成json形式的字符串
（5）原生js封装ajax()函数：传参顺序不能更改
function ajax(url, type, param, dataType, callback) { 传参顺序不能更改
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (type == "get") {
url = url + "?" + param;
}
xhr.open(type, url, true);
var dataPrama = null;
if (type == "post") {
dataPrama = param;
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
xhr.send(dataPrama);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = xhr.responseText;
if (dataType == "json") {
data = JSON.parse(data);
}
callback(data);
}
}
}
}
php页面（只示例post方法）：
<?php
$uname=$_POST['username'];
$passw=$_POST['password'];
echo '{"name":" '.$uname.' ","password":" '.$passw.' "}';
此处字符串拼接特别需注意’’单引号和””双引号的衔接
?>
（6）模仿jQuery（$.ajax()）方法封装ajax()函数不含jsonp：
btn.onclick = function () {
ajax({
url: "./login2.php",
type: "post",
dataType: "json",
data: {"username": "Tom", "password": 123},
success: function (data) {
console.log(data);
console.log(typeof data);
}
});
}
function ajax(obj) { 函数封装开始
var defaults = { 设置默认值
type: 'get',
data: {},
url: '#',
dataType: 'text',
async: true,
success: function (data) {
}
}
for (var key in obj) { 使用形参对默认值进行覆盖
defaults[key] = obj[key];
}
var xhr = null; 创建对象
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var param = ''; 创建请求参数
for (var attr in defaults.data) {
将对象类型请求参数，进行字符串拼接，转换成字符串
param += attr + '=' + defaults.data[attr] + '&';
}
if (param) { 删除上一步多拼接的最后一个’&’符号
param = param.substring(0, param.length - 1);
}
if (defaults.type == "get") {
defaults.url += "?" + encodeURI(param); 防止中文乱码
}
xhr.open(defaults.type, defaults.url, defaults.async);
var dataPrama = null;
if (defaults.type == "post") {
dataPrama = param;
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
xhr.send(dataPrama);
if (!defaults.async) {
处理async为false时，即同步请求，不调用回调函数
if (defaults.dataType == "json") {
return JSON.parse(xhr.responseText);
} else {
return xhr.responseText;
}
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = xhr.responseText;
if (defaults.dataType == "json") {
data = JSON.parse(data);
}
defaults.success(data);
}
}
}
}
php页面（只示例post方法）：
<?php
$uname=$_POST['username'];
$passw=$_POST['password'];
echo '{"name":" '.$uname.' ","password":" '.$passw.' "}';
此处字符串拼接特别需注意’’单引号和””双引号的衔接
?>
3.jsonp基础知识（通过动态创建<script>标签的src属性访问数据，服务器端响应的内容是函数调用）
（1）通过静态<script>标签跨域访问数据
<script async(加上这个属性后，就不能获取数据，因为async属性表示异步加载，js要想获取数据必须是同步加载，跨域获取数据时这个属性得删除)type="text/javascript" src="http://tabb.com/tabbdata.php"></script>
tabb.com是配置的另一台虚拟主机，形成跨域访问
<script>
console.log(data.name);
console.log(data.password); 可以获取返回的js代码
</script>
php页面：
<?php
$arr=array("name"=>"Tom","password"=>"123");
echo 'var data = '.json_encode($arr); 返回一段js代码
?>
（2）使用动态创建<script>标签的方法跨域访问数据(jsonp本质)
<script>
var script = document.createElement("script");
script.src = "http://tabb.com/tabbdata.php?callback=abc";
向后台动态传递函数名
var head = document.getElementsByTagName("head")[0];
head.appendChild(script);
console.log(data.name); 此处会报错
直接这样写访问不到数据，因为动态创建<script>标签，默认为异步请求访问模式
function abc (data){
通过申明一个函数，在后台调用的方法异步访问数据，函数名是任意的，但由于是全局变量，所以函数名最好是字母和随机数字相结合，类似jQuery中的名字
console.log(data.name,data.password)
}
或者通过添加load事件，将获取数据的代码写在发送请求的<script>标签添加的load事件之中，也可以动态获取数据
script.addEventListener(“load” , function(){
console.log(data)
} )
其他跨域方法：window.name ，iframe ， postMessage
</script>
php页面：
<?php
$arr=array("name"=>"Tom","password"=>"123");
echo 'var data = '.json_encode($arr); 直接访问时不能返回数据
$fn=$_GET['callback']; 使用get请求动态获取函数名
echo $fn.'('.json_encode($arr).')';通过调用函数的方法可以访问数据
?>
（3）jQuery方法中jsonp的基本使用
btn1.onclick = function () {
$.ajax({
url: "http://tabb.com/tabbdata.php",
type: "get",
dataType: "jsonp",
jsonp:"abc", 设定jsonp中传递函数的名称，默认为callback
success: function (data) {
console.log(data);
},
error: function () {
console.log("failure");
}
});
}
php页面：
<?php
$arr=array("name"=>"Tom","password"=>"123");
$fn=$_GET['abc'];
echo $fn.'('.json_encode($arr).')';
?>
（4）模仿jQuery方法封装ajax()函数包含jsonp：
function ajax(obj) {
var defaults = { 设置默认值
url: '#',
type: 'get',
async: true,
dataType: 'text',
jsonp: 'callback',
data: {},
success: function (data) {
}
}
for (var key in obj) {
defaults[key] = obj[key];
}
if (defaults.dataType == 'jsonp') { 本封装的核心思想
ajax4Jsonp(defaults);
} else {
ajax4Json(defaults);
}
function ajax4Jsonp(defaults) { 封装jsonp函数
var cbName = 'jQuery' + ('1.12.2' + Math.random()).replace(/\D/g, "") + '_' + (new Date().getTime());
模仿jQuery方法拼接传递函数的访问参数，1.12.2为jQuery版本号
if (defaults.jsonpCallback) {
设置传递函数访问参数可以修改，及不按照上述长字符串方法进行传递
cbName = defaults.jsonpCallback;
}
window[cbName] = function (data) {
给window添加cbName，此cbName以变为仿jQuery长字符串或传递的jsonpCallback值，同时调用这个函数
obj.success(data);
}
var param = '';
for (var attr in defaults.data) {
param += attr + '=' + defaults.data[attr] + '&';
}
if (param) {
param = param.substring(0, param.length - 1);
param = '&' + param; 因为多了cbName所以在前面加上’&’
}
var script = document.createElement("script");
script.src = defaults.url + '?' + defaults.jsonp + '=' + cbName + param;
var head = document.getElementsByTagName("head")[0];
head.appendChild(script);
}
function ajax4Json(defaults) { 此处封装与第二章（6）一样
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var param = '';
for (var attr in defaults.data) {
param += attr + '=' + defaults.data[attr] + '&';
}
if (param) {
param = param.substring(0, param.length - 1);
}
if (defaults.type == "get") {
defaults.url += "?" + encodeURI(param);
}
xhr.open(defaults.type, defaults.url, defaults.async);
var dataPrama = null;
if (defaults.type == "post") {
dataPrama = param;
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
xhr.send(dataPrama);
if (!defaults.async) {
if (defaults.dataType == "json") {
return JSON.parse(xhr.responseText);
} else {
return xhr.responseText;
}
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = xhr.responseText;
if (defaults.dataType == "json") {
data = JSON.parse(data);
}
defaults.success(data);
}
}
}
}
}
4.模板引擎（模板+数据à静态页面）拼接字符串模板
artTemplate(腾讯)（主要以此模板为例，性能优越）
官方文档：https://github.com/aui/artTemplate
简单示例代码：
<script type="text/html" id="bookList"> 注意type为text/html
<h1>{{title}}</h1>
{{if books}} 注意语法格式为双花括号{{}}
{{each books as value i}}
<div>{{value}}</div>
{{/each}}
{{/if}}
</script>
<script>
window.onload = function () {
var data = {
title: '四大名著',
books: ['三国演义', '水浒传', '西游记', '红楼梦']
};
var html = template('bookList', data);
bookList参数对应传入模板的id，data参数就是需要渲染的数据
var con = document.getElementById('container');
con.innerHTML=html;
}
</script>
