AJAX&PHP交互

最新推荐文章于 2023-03-30 13:38:38 发布

梁吉林

最新推荐文章于 2023-03-30 13:38:38 发布

阅读量568

点赞数 1

分类专栏： AJAX 文章标签： ajax ajax-php ajax-json json eval

本文链接：https://blog.csdn.net/ljl890705/article/details/50498839

版权

AJAX 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

AJAX实例

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。它可以实现在不更新整个页面的情况下，与服务器交换数据更新部份页面的实用功能。
AJAX对象的创建很简单，一条javascript语句就可以完成：

var request = new XMLHttpRequest();

好了，现在已经创建好了一个ajax请求的实例“request”。当然XMLHttpRequest()可能会使人感觉疑惑，不要从字面去理解，据传这是因为当初并没有认为ajax会被如此广泛的使用而随意起的名字，在广泛应用后也就没办法更改了。
IE浏览器在比较老的版本上（IE6往前）是不支持这种方法的，微软在IE7中才开始支持XMLHttpRequest，所以如果你编写的脚本是要运行在比较古老的IE浏览器上时，请用另一种方法建立ajax实例。本文默认以现在使用最广泛的windows7附带的IE8为基础，不考虑之前IE版本的处理。
创建完了之后，就需要开启一个ajax连接了，开启链接的方法是：

request.open(method,url,boolean);

当然，”request”是我们在上一段刚刚创建的实例，它调用的是open方法，这个方法通常需要设置3个参数，分别代表以下含义：

method：指明链接的请求方法，GET或POST；
url：指明请求的服务器端脚本，当使用GET方式时，url中也会带有传递给服务器脚本的参数；
boolean：布尔值，是否使用异步，默认为true异步，false表示同步。

使用open方法建立完链接之后，就需要设置一个类似于监听触发器的东西了，用来在服务器完成请求的处理后返回数据的处理。

request.onreadystatechange = function(){……}

这样就设定了一个等待处理的方法，在ajax请求状态改变的时候就会触发这个函数体。说到这里有一点需要特别说明，那就是ajax的请求状态一共有5种，分别是0-4，具体的含义如下：

0：请求未初始化（open之前）
1：请求已建立，但未发送（send之前）
2：请求已发送，服务器端正在处理中
3：请求处理中，服务器端还未生成响应
4：响应已完成，可以获取到服务器端的响应

浏览器对这些状态的处理并不是完全按照说明进行，有一些状态位直接就被浏览器忽略了（当然它用到的可能性极小极小）。不同的浏览器对这些状态的处理也不一致，有的会有1-4状态位，有的会是2-4状态位，甚至也有3-4状态位的浏览器。所以在设置状态处理的时候，我们直接以状态位4来进行判断，这个状态位是所有浏览器都支持的，不会出现异常错误。

request.onreadystatechange = function(){
    if(request.readyState == 4 && request.status == 200){
        var tmp = request.responseText;
        alert(tmp); 
    }
}

是不是又发现了一个新的东西，request.status表示的是HTTP状态，状态码200表示一切正常，当这两个条件都满足的时候，你就可以放心的处理服务器端返回的数据了。
最后一个ajax方法是send，作用是向服务器端发送请求，它通常被放在整个ajax流程的最后一步来进行：

request.send();

如果使用的请求方法是GET，那么send方法就不需要参数（当然写个null也是可以的），如果是POST方式，那么send方法中就要指定所要传递给服务器端的参数。
现在一个基本的ajax请求已经完成了，让我们把它封装成个函数一起来看看：

function myAjax(){
    var request = new XMLHttpRequest();
    var url = "1.php?id=1&name=lucy";
    request.open("GET",url,true);
    request.onreadystatechange = function(){
        if(request.readyState == 4 && request.status == 200){
            var tmp = request.responseText;
            alert(tmp);
        }
    }
}
request.send();

AJAX与PHP的交互

AJAX说完了，那就要实践一下，用一个最简单的例子，也不去获取页面的值，直接传送特定的值给服务器端php脚本来进行处理，php脚本名为1.php，HTML头尾部份就不写了。

<script>
function myAjax(){
    var request = new XMLHttpRequest();
    var url = "1.php?id=1&name=lucy";
    request.open("GET",url,true);
    request.onreadystatechange = function(){
        if(request.readyState == 4 && request.status == 200){
            var tmp = request.responseText;
            alert(tmp);
        }
    }
    request.send();
}
</script>

<body>
<input type="button" value="click me" onclick="myAjax();" />
</body>

服务器端脚本1.php内容如下：

<?php
$id = $_GET['id'];
$name = $_GET['name'];
if($id == 1 && $name == "lucy"){
    $str = "Welcome $name,Your id=$id";
    echo $str;
}else{
    echo "Input Infos Error!";
}

运行这个简单至极的示例，我们可以获得一个结果，这个示例已经能够说明AJAX的基本运行。
服务器端返回的信息不可以是数组，所以当需要返回的信息比较多的时候，就可以使用json_encode将其转换成json格式的数据返回给AJAX请求；AJAX请求接收到服务器端返回的JSON格式数据后，并不能直接当做JSON格式数据进行处理，还需要进行一次转换，使用eval将返回信息转换成JSON格式数据后再进行处理。
以下是一个简单AJAX处理JSON格式返回数据的例子：

<script>
function getMsg(){
    var xmlReq = new XMLHttpRequest();
    var url = "1.php?people=HiGoGo";
    xmlReq.open("GET",url,true);
    xmlReq.onreadystatechange = function(){
        if(xmlReq.readyState == 4 && xmlReq.status == 200){
            var reptext = xmlReq.responseText;
            var tmp = eval ("("+reptext+")");
            alert(tmp.address);
        }
    }
    xmlReq.send();
}
</script>

<body>
<input type="button" value="click me" onclick="getMsg();" />
</body>

所请求的服务器端1.php内容：

<?php
$tmp = $_GET['people'];
if($tmp == "HiGoGo"){
    $a = array(
        'id'=>2001,
        'name'=>'ljl',
        'sex'=>'man',
        'tel'=>186,
        'address'=>'huilongguan east',
        'birthday'=>'0705'
    );

    $b = json_encode($a);
    echo $b;
}

服务器端返回给AJAX请求的是一串有格式的字符信息，当AJAX请求要将这串信息以JSON格式来进行处理，则先使用javascript的eval方法将返回信息进行处理，然后就可以用对象的方法来使用返回数据中的值了。

需要说明的一些地方

1、AJAX是支持多种数据格式的，文本、XML和JSON都支持，相对来说XML的使用范围是比较狭窄的，更多的时候使用的是文本和JSON格式。这两种格式的数据都可以使用responseText来获取，XML格式的数据则需要使用responseXML来进行获取。
2、AJAX可以只获取HTTP头信息，在open方法中不使用GET或POST，使用HEAD，这样服务器返回的就是资源的头信息，获取头信息的方法是getAllResponseHeaders()。
3、当使用POST请求方式时，需要设置一个请求头信息，否则服务器端收不到传送的数据，头信息设置使用方法setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”)，可以在open方法后设置。
4、AJAX请求在处理返回的JSON格式数据时，eval(“(“+responseText+”)”)中间的两个括号不能忽略，否则会产生语法错误。

梁吉林

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX&PHP交互

AJAX实例AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。它可以实现在不更新整个页面的情况下，与服务器交换数据更新部份页面的实用功能。 AJAX对象的创建很简单，一条javascript语句就可以完成：var request = new XMLHttpRequest();好了，现在已经创建好了一个ajax请求的实例“req
复制链接

扫一扫