PHP全栈学习笔记13_ajax

php与ajax技术

web2.0的到来,ajax逐渐成为主流,什么是ajax,ajax的开发模式,优点,使用技术。(ajax概述,ajax使用的技术,需要注意的 问题,在PHP应用ajax技术的应用)

什么是ajax,ajax的开发模式,优点。

ajax是由jesse james garrett创建的,是asynchronous javascript and xml,异步javascript和xml技术,ajax并不是一门新的语言或技术,它是javascript,xml,css,dom等多种技术的组合,可以实现客户端的异步请求操作,可以在不刷新页面下与服务器进行通信,从而减少了用户的等待时间。

ajax开发模式:

浏览器(客户端) http传输,http请求, web服务器 数据存储,后端处理,继承系统,服务器端。

客户端(浏览器)JavaScript调用,ajax引擎 http请求,http传输, web和xml服务器,数据存储,后端处理,继承系统(服务端)。

优点:减轻服务器的负担,可以把部分由服务器负担的工作转移到客户端上,无刷新更新页面,可以调用xml等外部数据,基于标准化的并被广泛支持的技术。

JavaScript是一种在web页面中添加动态脚本代码的解释性程序语言。

xmlhttprequest

ie浏览器把xmlhttp

var http_request = new ActiveXObject("Msxml2.XMLHTTP");
var http_request = new ActiveXObject("Microsoft.XMLHTTP");


mozailla,safari等其他浏览器

var http_request = new XMLHttpRequest();
if(window.XMLHttpRequest){
http_request = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}


XMLHttpRequest对象的常用方法:

open()方法用于设置进行异步请求目标的url

open("method", "url" [,asyncFlag [,"userName" [, "password"]]])


send()方法用于向服务器发送请求

send(content)


setRequestHeader()方法

setRequestHeader()方法为请求的http头设置值

setRequestHeader("label","value")


label用于指定http头,value用于指定http头设置值

open()方法过后才能使用setRequestHeader()方法


abort()方法

abort()方法用于停止当前异步请求

getAllResponseHeaders()方法

getAllResponseHeaders()方法用于以字符串形式完整的http头信息。

xmlhttpRequest对象常用的属性

onreadystatechange 每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数。

readyState 请求的状态:

0 为未初始化
1 为正在下载
2 为已加载
3 在交互中
4 为完成


responseText 服务器的响应,表示字符串

responseXML 服务器的响应,表示xml

status 返回服务器的http状态码

statusText 返回http状态码对应的文本

xml语言为可扩展的标记语言,提供了用于描述结构化数据的格式。xmlHttpRequest对象与服务器交换的数据,通常采用xml格式。

dom为文档对象模型,为xml文档的解析定义了一组接口。

在PHP中应用AJAX技术检测用户名

<script language="javascript">
var http_request = false;
function createRequest(url) {
//初始化对象并发出XMLHttpRequest请求
http_request = false;
if (window.XMLHttpRequest) { //Mozilla等其他浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) { //IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert("不能创建XMLHTTP实例!");
return false;
}
http_request.onreadystatechange = alertContents; //指定响应方法

http_request.open("GET", url, true); //发出HTTP请求
http_request.send(null);
}
function alertContents() { //处理服务器返回的信息
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert('您请求的页面发现错误');
}
}
}
</script>
<script language="javascript">
function checkName() {
var username = form1.username.value;
if(username=="") {
window.alert("请填写用户名!");
form1.username.focus();
return false;
}
else {
createRequest('checkname.php?username='+username+'&nocache='+new Date().getTime());
}
}
</script>
<?php
header('Content-type: text/html;charset=GB2312'); //指定发送数据的编码格式为GB2312
$link=mysql_connect("localhost","root","root");
mysql_select_db("db_database",$link);
$GB2312string=iconv( 'UTF-8', 'gb2312//IGNORE' , $RequestAjaxString); //Ajax中先用encodeURIComponent对要提交的中文进行编码
mysql_query("set names gb2312");
$username=$_GET[username];
$sql=mysql_query("select * from tb_user where name='".$username."'");
$info=mysql_fetch_array($sql);
if ($info){
echo "很报歉!用户名[".$username."]已经被注册!";
}else{
echo "祝贺您!用户名[".$username."]没有被注册!";
}
?>


类别添加

<script language="javascript">
var http_request = false;
function createRequest(url) {
//初始化对象并发出XMLHttpRequest请求
http_request = false;
if (window.XMLHttpRequest) { //Mozilla等其他浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) { //IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert("不能创建XMLHTTP实例!");
return false;
}
http_request.onreadystatechange = alertContents; //指定响应方法

http_request.open("GET", url, true); //发出HTTP请求
http_request.send(null);
}
function alertContents() { //处理服务器返回的信息
if (http_request.readyState == 4) {
if (http_request.status == 200) {
sort_id.innerHTML=http_request.responseText; //设置sort_id HTML文本替换的元素内容
} else {
alert('您请求的页面发现错误');
}
}
}
</script>
<script language="javascript">
function checksort() {
var txt_sort = form1.txt_sort.value;
if(txt_sort=="") {
window.alert("请填写文章类别!");
form1.txt_sort.focus();
return false;
}
else {
createRequest('checksort.php?txt_sort='+txt_sort);
}
}
</script>
<?php
$link=mysql_connect("localhost","root","root");
mysql_select_db("db_database",$link);
$GB2312string=iconv( 'UTF-8', 'gb2312//IGNORE',$RequestAjaxString); //Ajax中先用encodeURIComponent对要提交的中文进行编码
mysql_query("set names gb2312");
$sort=$_GET[txt_sort];
mysql_query("insert into tb_sort(sort) values('$sort')");
header('Content-type: text/html;charset=GB2312'); //指定发送数据的编码格式为GB2312
?>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<select name="select" >
<?php
$link=mysql_connect("localhost","root","root");
mysql_select_db("db_database23",$link);
$GB2312string=iconv( 'UTF-8', 'gb2312//IGNORE' , $RequestAjaxString); //Ajax中先用encodeURIComponent对要提交的中文进行编码
mysql_query("set names gb2312");
$sql=mysql_query("select distinct * from tb_sort group by sort");
$result=mysql_fetch_object($sql);
do{
header('Content-type: text/html;charset=GB2312'); //指定发送数据的编码格式为GB2312
?>
<option value="<?php echo $result->sort;?>" selected><?php echo $result->sort;?></option>
<?php
}while($result=mysql_fetch_object($sql));
?>
</select>


xml基础技术

了解xml,使用simpleXML解析文档的方法

遍历xml文档,修改,保存xml,创建xml文档的方法

xml语法

xml文档结构,xml声明,处理指令,注解,xml元素,xml属性,使用cdata标记,xml命令空间。

XML文档结构

<?xml version="1.0" encoding="gb2312" standalone="yes"?>
<?xml-stylesheet type="text/css" href="111.css"?>


XML声明

<?xml version="1.0" encoding="gb2312" standalone="yes"?>


PHP全栈学习笔记13_ajax_02

处理指令

<?xml-stylesheet type = "text/css" href="111.css"?>
<?处理指令名 处理执行信息?>


xml-stylesheet:样式表单处理指令

type="text/css":设定了文档所使用的样式是css

href="111.css":设定了样式文件的地址

PHP全栈学习笔记13_ico_03

XML属性

<标签 属性名="属性值" 属性名=""…>内容</标签>


PHP全栈学习笔记13_ajax_04

SimpleXML

创建SimpleXML对象

Simplexml_load_file()函数,将指定的文件解析到内存中

Simplexml_load_string()函数,将创建的字符串解析到内存当中

Simplexml_load_date()函数,将一个使用dom函数创建的domDocument对象导入到内存当中

遍历所有子元素

children()方法和foreach循环语句可以遍历所有子节点元素

遍历所有属性

SimpleXML对象中的attributes()方法

<?xml version="1.0" encoding="GB2312"?>
<exam>

</exam>
<?php
header('Content-Type:text/html;charset=utf-8');
?>

<?php
/* 第一种方法 */
$xml_1 = simplexml_load_file("5.xml");
print_r($xml_1);
/* 第二种方法 */
$str = <<<XML
<?xml version='1.0' encoding='gb2312'?>
<Object>
<ComputerBook>
<title>PHP</title>
</ComputerBook>
</Object>
XML;
$xml_2 = simplexml_load_string($str);
echo '<br>';
print_r($xml_2);
/* 第三种方法 */
$dom = new domDocument();
$dom -> loadXML($str);
$xml_3 = simplexml_import_dom($dom);
echo '<br>';
print_r($xml_3);
?>
<?php
header('Content-Type:text/html;charset=utf-8');
?>
<style type="text/css">

<?php
$str = <<<XML
<?xml version='1.0' encoding='gb2312'?>
<object>
<book>
<computerbook>PHP</computerbook>
</book>
<book>
<computerbook>PHP</computerbook>
</book>
</object>
XML;
$xml = simplexml_load_string($str);
foreach($xml->children() as $layer_one){
print_r($layer_one);
echo '<br>';
foreach($layer_one->children() as $layer_two){
print_r($layer_two);
echo '<br>';
}
}
?>

<?php
$str = <<<XML
<?xml version='1.0' encoding='gb2312'?>
<object name='commodity'>
<book type='computerbook'>
<bookname name='22'/>
</book>
<book type='historybook'>
<booknanme name='111'/>
</book>
</object>
XML;
$xml = simplexml_load_string($str);
foreach($xml->children() as $layer_one){
foreach($layer_one->attributes() as $name => $vl){
echo $name.'::'.$vl;
}
echo '<br>';
foreach($layer_one->children() as $layer_two){
foreach($layer_two->attributes() as $nm => $vl){
echo $nm."::".$vl;
}
echo '<br>';
}
}
?>
<?php
header('Content-Type:text/html;charset=utf-8');
?>

<?php
$str = <<<XML
<?xml version='1.0' encoding='gb2312'?>
<object name='商品'>
<book>
<computerbook>P123</computerbook>
</book>
<book>
<computerbook name='456'/>
</book>
</object>
XML;
$xml = simplexml_load_string($str);
echo $xml[name].'<br>';
echo $xml->book[0]->computerbook.'<br>';
echo $xml->book[1]->computerbook['name'].'<br>';
?>
<?php
header('Content-Type:text/html;charset=utf-8');
$str=<<<XML
<?xml version='1.0' encoding='gb2312'?>
<object name='商品'>
<book>
<computerbook type='12356'>123</computerbook>
</book>
</object>
XML;

$xml = simplexml_load_string($str);
echo $xml[name].'<br />';
$xml->book->computerbook['type'] = iconv('gb2312','utf-8','PHP123');
$xml->book->computerbook = iconv('gb2312','utf-8','PHP456');
echo $xml->book->computerbook['type'].' => ';
echo $xml->book->computerbook;
?>
<?php
$xml = simplexml_load_file('10.xml');
$xml->book->computerbook['type'] = iconv('gb2312','utf-8','PHP1');
$xml->book->computerbook = iconv('gb2312','utf-8','PHP2');
$modi = $xml->asXML();
file_put_contents('10.xml',$modi);
$str = file_get_contents('10.xml');
echo $str;
?>
<?php
//Message_XML类,继承PHP5的DomDocument类
class Message_XML extends DomDocument{
//属性
private $Root;
//方法
//构造函数
public function __construct() {
parent:: __construct();
//创建或读取存储留言信息的XML文档message.xml
if (!file_exists("message.xml")){
$xmlstr = "<?xml version='1.0' encoding='GB2312'?><message></message>";
$this->loadXML($xmlstr);
$this->save("message.xml");
}
else
$this->load("message.xml");
}
public function add_message($user,$address){ //添加数据
$Root = $this->documentElement;
//获取留言消息
$admin_id =date("Ynjhis");
$Node_admin_id= $this->createElement("admin_id");
$text= $this->createTextNode(iconv("GB2312","UTF-8",$admin_id));
$Node_admin_id->appendChild($text);

$Node_user = $this->createElement("user");
$text = $this->createTextNode(iconv("GB2312","UTF-8",$user));
$Node_user->appendChild($text);

$Node_address = $this->createElement("address");
$text= $this->createTextNode(iconv("GB2312","UTF-8",$address));
$Node_address->appendChild($text);

$Node_Record = $this->createElement("record");
$Node_Record->appendChild($Node_admin_id);
$Node_Record->appendChild($Node_user);
$Node_Record->appendChild($Node_address);
//加入到根结点下
$Root->appendChild($Node_Record);
$this->save("message.xml");
echo "<script>alert('添加成功');location.href='".$_SERVER['PHP_SELF']."'</script>";
}
public function delete_message($admin_id){ //删除数据
$Root = $this->documentElement;
$xpath = new DOMXPath($this);
$Node_Record= $xpath->query("//record[admin_id='$admin_id']");
$Root->removeChild($Node_Record->item(0));
$this->save("message.xml");
echo "<script>alert('删除成功');location.href='".$_SERVER['PHP_SELF']."'</script>";
}

public function show_message(){ //读取数据
$root=$this-documentElement;
$xpath=new DOMXPath($this);

$Node_Record=$this->getElementsByTagName("record");
$Node_Record_length=$Node_Record->length;
print"<table width='506' bgcolor='#FFFFCC'><tr>";
print"<td width='106' height='22' align='center'>";
print"<b>用户名</b>";
print"</td><td width='400' align='center'>";
print"<b>留言信息</b></td></tr>";

for($i=0;$i<$Node_Record->length;$i++){
$k=0;
foreach($Node_Record->item($i)->childNodes as $articles){
$field[$k]=iconv("UTF-8","GB2312",$articles->textContent);
$k++;
}
print"<table width='506' bgcolor='#FFFFCC'><tr>";
print"<td width='100' height='22' align='center'>";
print"$field[1]";
print"</td><td width='300' align='left'>";
print"$field[2]";
print"</td><td width='100' align='center'>";
print"<a href='?Action=delete_message&admin_id=$field[0]'>删除</a></td>";
print"</tr></table>";
}}
public function post_message(){
print "<table width='506' bgcolor='#FFFFCC'><form method='post' action='?Action=add_message'>";
print "<tr><td width='106'height='22'>&nbsp;&nbsp;&nbsp;&nbsp;用户名:</td><td><input type=text name='user' size=50></td></tr>";
print "<tr><td width='106' height='22'>&nbsp;&nbsp;&nbsp;&nbsp;留言信息:</td><td width='400'><textarea name='address' cols='48' rows='5' id='address'></textarea></td></tr>";
print "<tr><td width='106' height='30'>&nbsp;&nbsp;<input type='submit' value='添加数据'></td><td align='right'><a href=?Action=show_message>查看数据</a>&nbsp;&nbsp;&nbsp;&nbsp;</td></tr></form></table>";
}

}
?>

<html>
<head>
<title>定义一个PHP读取XML类</title>
<style>
td,body{font-size:12px}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<body>
<table width=506 height=50 border=0 cellpadding=0 cellspacing=0 bgcolor="#33BE6B">

<tr>
<td width="506" height=50 valign="bottom" background="title.gif"><table width="506">
<tr>
<td height="24" align="right" scope="col">&nbsp;&nbsp;<a href=?Action=post_message>添加数据</a>&nbsp;&nbsp;&nbsp;</td>
</tr>
</table></td>
</tr>
<?php
$HawkXML = new Message_XML;
$Action ="";
if(isset($_GET['Action']))
$Action = $_GET['Action'];
switch($Action){
case "show_message": //查看
$HawkXML->show_message();
break;
case "post_message": //提交
$HawkXML->post_message();
break;
case "add_message": //添加
$HawkXML->add_message($_POST['user'],$_POST['address']);
break;
case "delete_message": //删除
$HawkXML->delete_message($_GET['admin_id']);
break;
}
?>
</table>
</body>
</html>
<?php
//Message_XML类,继承PHP5的DomDocument类
class Message_XML extends DomDocument{
//属性
private $Root;
//方法
//构造函数
public function __construct() {
parent:: __construct();
//创建或读取存储留言信息的XML文档message.xml
if (!file_exists("message.xml")){
$xmlstr = "<?xml version='1.0' encoding='GB2312'?><message></message>";
$this->loadXML($xmlstr);
$this->save("message.xml");
}
else
$this->load("message.xml");
}
public function add_message($user,$address){ //添加数据
$Root = $this->documentElement;
//获取留言消息
$admin_id =date("Ynjhis");
$Node_admin_id= $this->createElement("admin_id");
$text= $this->createTextNode(iconv("GB2312","UTF-8",$admin_id));
$Node_admin_id->appendChild($text);

$Node_user = $this->createElement("user");
$text = $this->createTextNode(iconv("GB2312","UTF-8",$user));
$Node_user->appendChild($text);

$Node_address = $this->createElement("address");
$text= $this->createTextNode(iconv("GB2312","UTF-8",$address));
$Node_address->appendChild($text);

$Node_Record = $this->createElement("record");
$Node_Record->appendChild($Node_admin_id);
$Node_Record->appendChild($Node_user);
$Node_Record->appendChild($Node_address);
//加入到根结点下
$Root->appendChild($Node_Record);
$this->save("message.xml");
echo "<script>alert('添加成功');location.href='".$_SERVER['PHP_SELF']."'</script>";
}

public function show_message(){ //读取数据
$root=$this-documentElement;
$xpath=new DOMXPath($this);

$Node_Record=$this->getElementsByTagName("record");
$Node_Record_length=$Node_Record->length;
print"<table width='506' bgcolor='#FFFFCC'><tr>";
print"<td width='106' height='22' align='center'>";
print"<b>用户名</b>";
print"</td><td width='400' align='center'>";
print"<b>留言信息</b></td></tr>";

for($i=0;$i<$Node_Record->length;$i++){
$k=0;
foreach($Node_Record->item($i)->childNodes as $articles){
$field[$k]=iconv("UTF-8","GB2312",$articles->textContent);
$k++;
}
print"<table width='506' bgcolor='#FFFFCC'><tr>";
print"<td width='100' height='22' align='center'>";
print"$field[1]";
print"</td><td width='400' align='left'>";
print"$field[2]";
print"</td>";
print"</tr></table>";
}}
public function post_message(){
print "<table width='506' bgcolor='#FFFFCC'><form method='post' action='?Action=add_message'>";
print "<tr><td width='106'height='22'>&nbsp;&nbsp;&nbsp;&nbsp;用户名:</td><td><input type=text name='user' size=50></td></tr>";
print "<tr><td width='106' height='22'>&nbsp;&nbsp;&nbsp;&nbsp;留言信息:</td><td width='400'><textarea name='address' cols='48' rows='5' id='address'></textarea></td></tr>";
print "<tr><td width='106' height='30'>&nbsp;&nbsp;<input type='submit' value='添加数据'></td><td align='right'><a href=?Action=show_message>查看数据</a>&nbsp;&nbsp;&nbsp;&nbsp;</td></tr></form></table>";
}

}
?>
<html>
<head>
<title>使用XML来存储少量的数据</title>
<style>
td,body{font-size:12px}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<body>
<table width=506 height=50 border=0 cellpadding=0 cellspacing=0 bgcolor="#33BE6B">

<tr>
<td width="506" height=50 valign="bottom" background="title.gif"><table width="506">
<tr>
<td height="24" align="right" scope="col">&nbsp;&nbsp;<a href=?Action=post_message>添加数据</a>&nbsp;&nbsp;&nbsp;</td>
</tr>
</table></td>
</tr>
<?php
$HawkXML = new Message_XML;
$Action ="";
if(isset($_GET['Action']))
$Action = $_GET['Action'];
switch($Action){
case "show_message": //查看
$HawkXML->show_message();
break;
case "post_message": //提交
$HawkXML->post_message();
break;
case "add_message": //添加
$HawkXML->add_message($_POST['user'],$_POST['address']);
break; }
?>
</table>
</body>
</html>


结言

好了,欢迎在留言区留言,与大家分享你的经验和心得。

感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。

感谢!承蒙关照!您真诚的赞赏是我前进的最大动力!

PHP全栈学习笔记13_php_05