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(Windows.XMLHttpRequest){
- http_request = new XMLHttpRequest();
- }else if(Windows.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 请求的状态:
为未初始化
为正在下载
为已加载
在交互中
为完成
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 (Windows.XMLHttpRequest) { //Mozilla 等其他浏览器
- http_request = new XMLHttpRequest();
- if (http_request.overrideMimeType) {
- http_request.overrideMimeType("text/xml");
- }
- } else if (Windows.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=="") {
- Windows.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 (Windows.XMLHttpRequest) { //Mozilla 等其他浏览器
- http_request = new XMLHttpRequest();
- if (http_request.overrideMimeType) {
- http_request.overrideMimeType("text/xml");
- }
- } else if (Windows.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=="") {
- Windows.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"?>
image.PNG
处理指令
<?xml-stylesheet type = "text/css" href="111.css"?> <? 处理指令名 处理执行信息?>
xml-stylesheet: 样式表单处理指令
type="text/css": 设定了文档所使用的样式是 CSS
href="111.css": 设定了样式文件的地址
image.PNG
xml 属性
<标签 属性名 ="属性值" 属性名 =""...>内容</ 标签>
image.PNG
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'> 用户名:</td><td><input type=text name='user'size=50></td></tr>"; print "<tr><td width='106'height='22'> 留言信息:</td><td width='400'><textarea name='address'cols='48'rows='5'id='address'></textarea></td></tr>"; print "<tr><td width='106'height='30'> <input type='submit'value='添加数据'></td><td align='right'><a href=?Action=show_message > 查看数据</a> </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"> <a href=?Action=post_message > 添加数据</a> </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'> 用户名:</td><td><input type=text name='user'size=50></td></tr>"; print "<tr><td width='106'height='22'> 留言信息:</td><td width='400'><textarea name='address'cols='48'rows='5'id='address'></textarea></td></tr>"; print "<tr><td width='106'height='30'> <input type='submit'value='添加数据'></td><td align='right'><a href=?Action=show_message > 查看数据</a> </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"> <a href=?Action=post_message > 添加数据</a> </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>
结言
好了, 欢迎在留言区留言, 与大家分享你的经验和心得.
感谢你学习今天的内容, 如果你觉得这篇文章对你有帮助的话, 也欢迎把它分享给更多的朋友, 感谢.
感谢! 承蒙关照! 您真诚的赞赏是我前进的最大动力!
image
image
来源: http://www.jianshu.com/p/03034efed829