Ajax基础知识 浅析（含php基础语法知识）
Posted tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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");
}
&nb 以上是关于Ajax基础知识 浅析（含php基础语法知识）的主要内容，如果未能解决你的问题，请参考以下文章