简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  pembangunan bahagian belakang  >  PHP与AJAX实例详解

PHP与AJAX实例详解

小云云
小云云asal
2018-02-22 13:54:572574semak imbas

本文我们将和大家分享AJAX基础、PHP与AJAX、JSON格式、jQuery中的AJAX，希望本文能帮助到大家。

1.AJAX基础

(1)AJAX(Asynchronous JavaScript and XML):异步的javascript和xml的缩写。

(2)AJAX不是某种编程语言,而是一种在无需加载整个页面的情况下能够更新部分网页的技术。

(3)传统网页的缺点：需要更新内容或者提交一个表单,需要重新加载整个页面;使用AJAX优点：通过在后台跟服务器进行少量的数据交换，网页就可以实现异步局部更新。对于填写复杂表单来说，有非常好的用户体验。

(4)AJAX同步与异步：同步说白了就是加载整个页面;异步能够加载部分页面。具体的话,客户端与服务器端的联系。Ajax技术出现之前，都是同步的交换数据，如果填写的比较复杂的表单将非常麻烦。有了XMLHttpRequest对象后，同步世界变为了异步世界。通过XMLHttpRequest这个对象后台可以和服务器进行数据交换。

(5)XMLHttpRequest对象创建：var requerst=new XMLHttpRequest();直接实例化对象即可!注意：IE5和IE6不支持这种定义，如果要实现浏览器页面兼容，如下代码所示：

var request;
if(window.XMLHttpRequest){
    request  = new XMLHttpRequest();  // IE7+,Firefox,Chrome,Opera,Safari...
}else{
    request = new ActiveObject("Microsoft.XMLHTTP"); // IE6,IE5
}

(6)HTTP请求：http是一种无状态的协议：说白了就是不能建立持久连接且无记忆的协议。进一步：通过页面请求和响应的过程，实现网页的调试。

(6.1)一个完整的HTTP请求过程，通常有下面7个步骤：

  • 建立TCP连接

  • Web浏览器向Web服务器发送请求命令

  • Web浏览器发送请求头信息

  • Web服务器应答

  • Web服务器发送应答头信息

  • Web服务器向浏览器发送数据

  • Web服务器关闭TCP连接

(6.2)http请求一般由四部分组成：

  • HTTP请求的方法或动作，比如是GET还是POST请求

  • 正在请求的URL，总得知道请求的地址是什么吧

  • 请求头，包含一些客户端的环境信息，身份验证信息等

  • 请求体，也就是请求正文，请求正文中可以包含客户提交的查询支付穿信息，表单信息等等

(6.3)GET与POST[收集来自method="post/get"的表单中的name值]

说白了,都是收集从表单里面传过来的值。传过去的值,一种以url的形式显示(不安全),一种以值的形式显示(安全);GET一般用于信息的获取，使用url传递参数，限制在2000个字符，对所有人可见，不安全。POST一般用于从表单发送数据，参数在http请求体中，不限制信息发送数量。

(6.4)Http响应一般由三个部分组成:

  • 由一个数字和文字组成的状态码，用来显示请求是成功还是失败；

  • 响应头，包含服务器类型，日期时间，内容类型和长度等；

  • 响应体，也就是响应正文。

(6.5)Http状态码由三位数字组成，其中首位数字定义了状态码的类型：

  • 1XX:信息类，表示收到web浏览器请求，正在进一步的处理中；

  • 2XX:成功，表示用户请求被正确接收、理解和处理，例如：200 OK

  • 3XX:重定向，表示请求没有成功，客户必须采取进一步的动作

  • 4XX:客户端错误，表示客户端提交的请求有错误，如404 NOT FOUND，意味着请求中引用的文档不存在。

  • 5XX:服务器错误，表示服务器不能完成对请求的处理。

(7)XMLHttpRequest发送请求:(对象的方法)

  • open(method请求方法,url请求地址,async请求同步或者异步(异步是true,同步是false,其实默认就是true));///调用异步请求

  • send(string);(使用get方法时，参数可以不填写或者null，因为信息都包含在地址栏url中；使用post则一定要填写);//把请求发送到服务器

举个栗子:

request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置http的头信息,告诉web服务器要发送一个表单;注意：setRequest请求一定要放在open和send之间，否则会抛出异常
request.send("name=王大锤&sex=男");

(8)XMLHttpRequest取得响应:(对象的方法和属性)

  • responseText:简单来说:就是接收服务器响应回送的数据。获得字符串形式的相应数据。

  • responsXML:获得XML形式的相应数据。现在一般转换为JSON形式的数据。

  • status和statusText：以数字和文本形式返回http状态码。

  • getAllResponseHeader()：获取所有的响应报头。

  • getResponseHeader()：查询响应中的某个字段的值。

readyState属性：响应返回成功的时候得到通知。

  • 0：请求未初始化，open还没有调用。

  • 1：服务器连接已建立，open已经调用了。

  • 2：请求已经接收，也就是接收到头信息了。

  • 3：请求处理中，也就是接收到响应主体了。

  • 4：请求已完成，且响应已就绪，也就是响应完成了。

举个栗子:涵盖了ajax的大部分内容(典型的xhr建立ajax的过程)

var request = new XMLHttpRequest();//创建XHR对象
request.open("GET","get.php",true);//调用异步请求
request.send();//发送异步请求
//对事件进行监听,判断服务器是否正确得做出了响应
request.onreadystatechange = function(){
  if(request.readyState===4 && request.status === 200){
    request.reponseText;//接收服务器响应回送的数据
   }
}

2.PHP与AJAX

实战:[服务器端与客户端]实现查询员工和新建员工的后台接口

(1)客户端部分代码:

//新建员工客户端代码
document.getElementById("save").onclick=function(){
    var request=new XMLHttpRequest();//创建XHR对象
    request.open("POST","action.php");//调用异步请求
    //data拼接的URL
    //document.getElementById("staffName").value获取表单中用户写入的值
    var data = "username=" + document.getElementById("staffName").value 
                  + "&num=" + document.getElementById("staffNumber").value 
                  + "&workname=" + document.getElementById("staffJob").value;
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置http的头信息
    request.send(data);//发送异步请求
    //对事件进行监听,判断服务器是否能正确做出响应
    request.onreadystatechange=function(){
        if(request.readyState===4){
            if(request.status===200){
                //innerHTML不仅可以读取元素内容,还可以将内容写入元素
                //ajax引擎对象通过responseText属性或者responseXML属性接收服务器回送的数据，然后在静态页面中对其进行处理，使页面达到局部刷新的效果
                document.getElementById("createResult").innerHTML=request.responseText;
            }else{
                alter("发生错误:"+request.status);
            }
        }
    }
}

(2)服务器端部分代码:

//查询员工服务器端代码
<?php 
header(&#39;Content-type:text/html;charset=utf8&#39;);
$con=mysqli_connect("127.0.0.1","","");
mysqli_select_db($con,"function");
$sql="SELECT * FROM `ajax`";
$query=mysqli_query($con,$sql);
//数据库数据的总条数$number
$number=mysqli_num_rows($query);
for($i=0;$i<$number;$i++){
    //将每条数据转换成关联数组打印出来
    $arr=mysqli_fetch_row($query);
    //print_r($arr);
    //echo $arr[2];die;
    if($_GET[&#39;num&#39;]==$arr[2]){
        echo "找到员工:编号$arr[2],姓名:$arr[1],职位:$arr[3]";
        break;
    }
}
 ?>

3.JSON格式

(1)json:javascript对象表示法。

(2)json是存储和交换文本信息的语法，类似xml。采用键值对的方式组织，易于人们阅读与机器解析。

(3)json是独立于语言的，不管什么语言都可以解析json，只要按json的规则来就行。

(4)json的长度比xml小;json读写的速度更快;json可以使用js内建方法直接解析，转化成js对象，非常方便。

(5)json语法规则：json数据的书写格式是：名称/值对。

名称/值对组合中的名称写在前面（在双引号中），值对写在后面（同样在双引号中），中间用冒号隔开，比如"name":"王大锤"。注意：json与javaScript对象表示法不同，javaScript对象表示法的键值不需要用引号，但是json的键值要用引号。

注意：json可以是整型、浮点型、字符串(在双引号中)、布尔值(true或false)、数组(在方括号中)、对象(在花括号中)、null等数据类型。

举个栗子：

{//定义了一个json对象
  "staff":[//定义了一个数组
    {"name":"王大锤","age":21},//定义了一个name对象
    {"name":"叫兽","age":35}
  ]
}

(6)json解析：eval()和JSON.parse()两种方式解析成JSON形式

两种方法比较：建议使用JSON.parse()方法解析成JSON形式

eval();不安全，如果json中有函数或js程序代码（alert或一个window.location.href()跳转链接病毒网站等），会优先执行代码，危险操作。JSON.parse();对json文件具有校验功能，如果json文件里面有程序脚本，会解析报错。

举个栗子：

var jsondata='{
    "staff":[{
            "name":"王大锤",
            "age":22
        },
        {
            "name":"叫兽",
            "age":23
        },
        {
            "name":"王尼玛",
            "age":24
        }
    ]
}';

var jsonobj=JSON.parse(jsondata);//JSON.parse解析JSON
var jsonobj=eval('(' + jsondata + ')');//eval解析JSON

alert(jsonobj.staff[0].name);

注意：上面书写是错误的，只为了看清楚。逗号不是分隔符，逗号是文本内容，所有的都应该紧凑写，不能自己为了看清楚，人为用空格分开。(这里找了一个小时错误...)

(7)json验证工具：JSONLint

(8)举个栗子:

使用json,首先需要服务器端的约定,
用此种方法能够减少更多的判断,以更加优雅的形式显示
{
    //前端规则验证、后端数据验证
    "success":true,//是否正确执行(表单等规则验证)
    "msg":"×××"//请求的响应值是否成功(http响应返回的信息)
}
服务器端部分代码:
//echo "参数错误，员工信息填写不全";
echo '{"success":false,"msg":"参数错误，员工信息填写不全"}';

if($query){
    //echo "员工：" . $_POST["username"] . " 信息保存成功！";
    echo '{"success":true,"msg":"员工保存成功"}';
}else{
    //echo "员工：" . $_POST["username"] . " 信息保存失败！";
    echo '{"success":false,"msg":"员工保存失败"}';
}
客户端json代码:其它不变,将服务器端响应传过来的responseText(文本形式)转换为(JSON形式),将json字符串转化为了一个json对象data,然后就能够以对象的形式处理数据
    request.onreadystatechange=function(){
        if(request.readyState===4){
            if(request.status===200){
                //将服务器端响应传过来的responseText(文本形式)转换为(JSON形式)
                //将json字符串转化为了一个json对象data
                var data=JSON.parse(request.responseText);
                if(data.success){
                    document.getElementById("createResult").innerHTML=data.msg;
                }else{
                    document.getElementById("createResult").innerHTML="出现错误"+data.msg;
                }
            }
        }
    }

4.jQuery中的AJAX

(1)使用jquery实现ajax请求：作用：避免兼容问题，代码简洁，操作快捷方便。

(2)语法:jQuery.ajax([settings])

  • type：类型，“POST”或“GET”，默认为“GET”。

  • url：发送请求的地址。

  • data：是一个对象，连同请求发送到服务器的数据。

  • dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断，一般我们采用json格式，可以设置为“json”。

  • success：是一个方法，请求成功后的毁掉函数。传入返回后的数据，以及包含成功代码的字符串。

  • error：是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象。

相关推荐：

PHP与Ajax调用

php与ajax实现页面自动刷新

PHP与Ajax相结合实现登录验证小Demo_PHP


Atas ialah kandungan terperinci PHP与AJAX实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：正则表达式字符小结Artikel seterusnya：PHP与MYSQL数据库连接教程分享

Artikel berkaitan

Lihat lagi