资讯专栏INFORMATION COLUMN

PHP与AJAX的相爱相杀

wthee / 3098人阅读

摘要:响应一般由三个部分组成由一个数字和文字组成的状态码,用来显示请求是成功还是失败响应头,包含服务器类型,日期时间,内容类型和长度等响应体,也就是响应正文。获得形式的相应数据。和以数字和文本形式返回状态码。

学习目录:

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)服务器端部分代码:

//查询员工服务器端代码

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107511.html

相关文章

  • PHPAJAX相爱相杀

    摘要:响应一般由三个部分组成由一个数字和文字组成的状态码,用来显示请求是成功还是失败响应头,包含服务器类型,日期时间,内容类型和长度等响应体,也就是响应正文。获得形式的相应数据。和以数字和文本形式返回状态码。 学习目录: AJAX基础 PHP与AJAX JSON格式 jQuery中的AJAX 个人网站原创链接地址:不足之处欢迎留言...逃... showImg(https://segm...

    Shisui 评论0 收藏0
  • PHPAJAX相爱相杀

    摘要:响应一般由三个部分组成由一个数字和文字组成的状态码,用来显示请求是成功还是失败响应头,包含服务器类型,日期时间,内容类型和长度等响应体,也就是响应正文。获得形式的相应数据。和以数字和文本形式返回状态码。 学习目录: AJAX基础 PHP与AJAX JSON格式 jQuery中的AJAX 个人网站原创链接地址:不足之处欢迎留言...逃... showImg(https://segm...

    Clect 评论0 收藏0
  • 相爱相杀终于结束 苹果宣布放弃爱尔兰数据中心建设

    摘要:本周四苹果公司表示已经放弃价值亿美元的爱尔兰数据中心建设。爱尔兰高等法院与近日发布裁决,驳回上诉者相关请求,允许建设苹果数据中心项目。此次苹果放弃爱尔兰数据中心项目将会对阿森赖地区造成巨大损失。本周四苹果公司表示已经放弃价值10亿美元的爱尔兰数据中心建设。早在2015年,苹果公司宣布在爱尔兰建设数据中心计划,距今已经过去了2年之久,同期宣布建设的还有苹果丹麦数据中心。目前,苹果丹麦数据中心已...

    2shou 评论0 收藏0
  • 云计算Hadoop11年来相爱相杀

    同时诞生于2006年,十年间云计算革了架构的命,那Hadoop呢?Doug Cutting,在外界看来至少有两个称谓:作为技术大牛他是Hadoop之父,作为商业领袖他是Cloudera首席架构师。近日,Doug Cutting来到北京,也因此接受了科技茱比莉的采访。过去的十年毫无疑问属于云计算和大数据。其中,Hadoop被认为是大数据领域的一个里程碑,它驱动了大数据的快速发展,还将深刻影响IoT和...

    Godtoy 评论0 收藏0
  • 你所不知道 ❌ PHP 自动加载

    前言 很多的小伙伴在,学习 PHP 的时候最早面对的问题之一就是 require 、 include 和 require_once 、include_once 的相爱相杀。 在了解了它们相爱相杀的故事后,往往就开始使用起了框架。框架固然是干活的好工具,但是你知道你平时 new 一个新类的时候,发生了什么吗?有想过为什么我们 遵循规范 就会自动的帮我们做好一切的加载吗? 让我们一切来探索发现其中的奥...

    sixgo 评论0 收藏0

发表评论

0条评论

wthee

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<