PHP与AJAX的相爱相杀

时间  2019-12-14
标签 php ajax 相爱 栏目 PHP 繁體版
原文   原文链接

学习目录：javascript

  • AJAX基础
  • PHP与AJAX
  • JSON格式
  • jQuery中的AJAX
我的网站原创连接地址：不足之处欢迎留言...逃...

图片描述

1.AJAX基础

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

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

(3)传统网页的缺点：须要更新内容或者提交一个表单,须要从新加载整个页面;使用AJAX优势：经过在后台跟服务器进行少许的数据交换，网页就能够实现异步局部更新。对于填写复杂表单来讲，有很是好的用户体验。前端

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

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

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

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

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

  • 创建TCP链接
  • Web浏览器向Web服务器发送请求命令
  • Web浏览器发送请求头信息
  • Web服务器应答
  • Web服务器发送应答头信息
  • Web服务器向浏览器发送数据
  • Web服务器关闭TCP链接

(6.2)http请求通常由四部分组成：ajax

  • HTTP请求的方法或动做，好比是GET仍是POST请求
  • 正在请求的URL，总得知道请求的地址是什么吧
  • 请求头，包含一些客户端的环境信息，身份验证信息等
  • 请求体，也就是请求正文，请求正文中能够包含客户提交的查询支付穿信息，表单信息等等

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

说白了,都是收集从表单里面传过来的值。传过去的值,一种以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('Content-type:text/html;charset=utf8');
$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['num']==$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对象。
更新时间:2018/2/13 23:36:53
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程