PHP入门（18）PHP与Ajax

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了PHP入门（18）PHP与Ajax相关的知识，希望对你有一定的参考价值。

1.什么是Ajax？

是一种创建灵活，交互性强的Web技术，利用其可以实现响应迅速，无刷新的Web应用。Ajax是javascript，XML，CSS，DOM等多种技术的组合，Ajax是客户端技术，其编译和执行由浏览器执行。Ajax可以实现在不需要刷新页面的情况下与服务器进行通信，从而减少用户等待的时间，是一种通过javascript可以调用后台服务器获得数据的客户端技术。

Ajax可以把一部分由服务器负担的工作转移到客户端，利用客户端的资源进行处理，减轻服务器负担。


2.Ajax技术组成。

Ajax的最核心的技术是XMLHttpRequest对象，它是一个具有应用程序接口的javascript对象，可以使用http协议连接服务器，通过XMLHttpRequest,Ajax可以像桌面应用程序一样，只向服务器进行数据层面的交换，而不用刷新整个页面。

XMLHttpRequest对象在发送请求和处理请求之前，必须要初始化该对象。由于XMLHttpRequest不是一个W3C标准，对于不同服务器有不同的初始化方法。根据浏览器的不同，可以分为两种（IE与非IE）。为了实现程序的兼容性，可以使用下面的代码初始化XMLHttpRequest对象。

<script language="JavaScript">
    var http_request;
    if(window.XMLHttpRequest){
        http_request = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
</script>

XMLHttpRequest对象的常用方法

（1）open(method,url,asynFlag)

该方法向指定的url发送请求。

method请求类型 POST或者GET

URL 请求的地址

aysnFlag 请求的方式，同步为true,异步则为false 默认是true

（2）send(content)

该方法向服务器发送请求，如果声明为异步，则该方法立即返回，否则将等待接收到响应为止。

content用于指定发送的数据。

（3）setRequestHeader(label,value) 设置HTTP头设置值，必须在open()方法之后才能调用

(4)abort() 停止当前异步请求

（5）getAllResponseHeaders()

以字符串的形式返回完整的HTTP头信息


XMLHttpRequest对象常用的属性值

onreadystateChange 每次状态改变都会触发这个事件处理器，通常会调用一个javascript函数

readyState(请求的状态 可以取五个值 0未初始化，1正在加载，2已加载，3交互中，4完成)

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

responseXML 服务器的响应，表示为XML

status(返回服务器的状态码，200成功，202请求被接受，400错误的请求，404文件未被找到，500内部服务器错误)

statusText(返回HTTP状态码对应的文本)


XMLHttpRequest对象与服务器交互一般经历以下三个步骤

  1. 初始化XMLHttpRequest对象

  2. 设置请求状态和返回处理函数

  3. 发送HTTP请求

下面通过一个小例子来说明以下，我们通过XMLHttpRequest对象来请求一个html文件的内容。

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript">
        var xmlhttp;
        function createXMLhttp() {
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                try {
                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
            }
            if(xmlhttp){
                //alert("xmlhttp created");
            }else{
                xmlhttp = false;
                //alert("xmlhttp not created");
            }
            return xmlhttp;
        }
        function ReqHtml(){
            createXMLhttp();
            xmlhttp.onreadystatechange = StatHandler;
            xmlhttp.open("GET","text.html",true);
            xmlhttp.send(null);
        }
        function StatHandler(){
            if(xmlhttp.readyState == 0 ){
                //alert("1");
            }
            if(xmlhttp.readyState == 1 ){
                //alert("2");
            }
            if(xmlhttp.readyState == 3){
               //alert("3");
            }
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                //alert(xmlhttp.status);
                document.getElementById("webpage").innerHTML = xmlhttp.responseText;
            }
        }
    </script>
</head>
<body>
<a href="#" onclick="ReqHtml();">通过XMLHttpRequest对象请求html文件</a>
<div id="webpage"></div>
</body>

html文件的内容很简单 只有一个字符串 hello world这里不再给出，当点击超链接的时候，出现hello world

技术分享


3.Ajax如何与php交互

主要有两种方式 get 和 post

(1)get

当向url传递参数的时候，应该直接加在open方法的url的后面。

例如 

xmlhttp.open("GET","searchrst.php?cont="+cont,true);

下面我们通过XMLHttpRequest对象向后台服务器请求数据并且显示出来。关键代码如下

/*conn.php*/
<?php
$mysqli = new mysqli("localhost","root","123456","mydb") or die("数据库连接失败!".$mysqli->errno);
/*index.html*/
function showresult(){
    createXMLhttp();//初始化XMLHttpRequest对象
    var cont = document.getElementById("searchtxt").value;//获取表单的值
    xmlhttp.onreadystatechange = StatHandler;//设置回调函数
    xmlhttp.open("GET","searchrst.php?cont="+cont,true);//通过get方法向传参数
    xmlhttp.send(null);
}
function StatHandler(){
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        document.getElementById("webpage").innerHTML = xmlhttp.responseText;
    }
}
/*表单部分*/
<form name="searchform" id="searchform" method="get" action="#">
    <label for="searchtxt">请输入关键字</label>
    <input name="searchtxt" id="searchtxt" type="text">
    <input type="button" value="查询" onclick="showresult()">
</form>
<div id="webpage"></div>  <!-- 这里会显示向数据库查询的结果-->
/*searchtxt.php*/
<?php
header("Content-type:text/html;charset=utf-8");
include_once("conn/conn.php");
$cont = $_GET["cont"];
$res = $mysqli->query("select * from mytb where id=".$cont);
if($row = $res->fetch_assoc()){
    echo $row["name"];/*reponseText的值*/
}

（2）post

当向url传递参数的时候，应该使用XMLHttpRequest的send()方法。

例如传递username为tom ,password为123456应该使用

var post_method = "username="+username+"&password"+password;
xmlhttp.open("POST","searchtxt.php",true);
xmlhttp.onreadystatechange=StatHandler;
xmlhttp.send(post_method);/*传递的参数*/

实现上面同样功能的代码如下

/index.html/
function showresult(){
    createXMLhttp();
    var cont = document.getElementById("searchtxt").value;
    //alert(cont);
    var value = "cont=" + cont; //注意 javascript使用加号连接字符串的，一开始用的.,调了很久
    //alert(value);
    xmlhttp.onreadystatechange = StatHandler;//下面两行代码不能丢 如果使用post传递数据的话，
    //设置content-type的值为application/x-www-form-urlencoded
    xmlhttp.open("POST","searchrst.php",true);
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
    xmlhttp.send(value);//发送url参数
}
function StatHandler(){
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        alert("ok");
        document.getElementById("webpage").innerHTML = xmlhttp.responseText;
    }
}
<form name="searchform" id="searchform" method="post" action="#"><!--这里需要改-->
    <label for="searchtxt">请输入关键字</label>
    <input name="searchtxt" id="searchtxt" type="text">
    <input type="button" value="查询" onclick="showresult()"><!--这里是button，不是submit-->
</form>
<div id="webpage"></div>
/*searchtxt.php*/
<?php
header("Content-type:text/html;charset=utf-8");
include_once("conn/conn.php");
$cont = $_POST["cont"]; /*由于使用post方法进行交互，这里需要改为$_POST*/
$res = $mysqli->query("select * from mytb where id=".$cont);
if($row = $res->fetch_assoc()){
    echo $row["name"];//reponseText
}


4.Ajax的缺点

由于Ajax主要依赖于XMLHttpRequest对象，由于XMLHttpRequest对象的实例在处理完事件之后就会被销毁，如果不进行封装处理，下次需要使用该对象时还需要重新构建，每次调用都要写一大段代码，使用起来很不方便。

解决办法：可以使用开源的Ajax框架，很多开源Ajax框架都对XMLHttpRequest对象进行了封装，比如JQuery。使用JQuery可以使用简单的几行代码实现非常复杂的交互。关于JQuery的使用方法，可以自行查找资料学习。这里不再赘述。

本文出自 “厚积薄发” 博客，请务必保留此出处http://joedlut.blog.51cto.com/6570198/1858294

以上是关于PHP入门（18）PHP与Ajax的主要内容，如果未能解决你的问题，请参考以下文章

AJAX相关JS代码片段和部分浏览器模型

Ajax入门

PHP概览

PHP整体概览

php基础入门：mysql和Ajax

php 创建 DOM 元素并使用 ajax 发送