PHP兔

<?php echo "Hello, World!";?>

· 默认分类 · · 62次浏览

php全栈工程师在成长(4)

作为一名php全栈工程师,JavaScript编程技术也得掌握。

HTMLCSS只是为网页的结构、样式提供了技术支持,而JavaScript就是负责处理网页上面的各种行为,让网页变得有互动性。JavaScript可以操作DOM、可以验证表单数据、也可以向后端发送ajax请求。

什么是DOM?
DOM (Document Object Model),是浏览器提供给我们的API,它把每一个HTML的标签定义成一个节点(node),以利于开发者通过JavaScript语言修改各种node之属性、结构等。

什么是Ajax?
Asynchronous JavaScript and XML.这是一种从浏览器向服务器发送数据以及请求的技术,并且这种过程是异步进行的。我举个例子:
如果不采用 ajax请求技术,当用户在页面发起请求时,就要进行整个页面的刷新,刷新快慢取决于服务器的处理快慢。在这个过程中用户必须得等待,不能进行其他操作,也就是同步的方式,这时候客户端和服务端传递了很多不需要的数据。它效率低,用户体验差。而采用ajax的页面,可以实现页面的局部更新,而不是整个页面的更新;并且发起请求后,用户还可以进行页面上的其他操作。这就是异步的方式,客户端和服务端间只传递真正需要的数据,效率高,用户体验性好。

标准Http协议支持的请求方法有哪几种?
OPTIONS
GET
HEAD
POST
PUT
DELETE
TRACE
CONNECT

GET 跟POST 有哪些区别,可以试着举几个例子吗?
GET 就像是一张明信片,你可以把要传递的所有信息写在明信片表面(http-header)上,写满为止。然而POST 就像是发送信封邮件,不但信封表明(http-header)可以写东西,信封内(message-body) 还可以放入你想要寄送的物品。所以,对于外人而言,GET是很清楚的直接看到你邮寄的内容,而POST,别人是不能直接看到你邮寄的具体内容。

什么是RESTful API?
Representational State Transfer,简称REST,充分地使用了HTTP 协议的请求方法 (GET/POST/PUT/DELETE),如下

获取使用者资料/GET /users

获取使用者资料/GET /user/1

新增使用者资料/POST /user

更新使用者资料/PUT /user/1

删除使用者资料/DELETE /user/1

这种方式的api结构看起来简单易懂,而在程序框架中强制使用REST风格的最有名的应该就是Ruby on Rails 了

JSON 是什么?
JSON是一种数据格式,它通过JavaScript对象存储数据

JSONP 是什么?
这是JSON数据的一种“使用模式”,这种被称为JSONP,该模式可以让A域名的网页请求B域名的网页数据,这就是“跨域”请求。不同域名、不同ip、不同端口的数据访问,都属于跨域。js本身对跨域请求数据是不被允许的,但跨域请求js文件却是允许的。在这种情况下,聪明的程序员们想到了,怎样把数据冒充成js的形式,以绕过安全检查。但是数据的承载形式有很多种,可以是xml、json等,json数据格式属于所有语言都支持的语言,因而使用json作为跨域请求的数据载体,从而产生了jsonp请求方法,JSONP解决了ajax跨域请求的问题。下面我们看一个JSONP实现跨域的例子:

a域名下的html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jsonp</title>
    <script type="text/javascript" src="/static/jquery.min.js"></script>
</head>
<body>
    <h1>JSONP</h1>

    <script type="text/javascript">
     $(document).ready(function(){
        $.ajax({
             type: "get",
             async: false,
             url: "http://b.com/test.php",//b域名下面的php
             dataType: "jsonp",
             jsonp: "callback",//传递给b域名的处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
             jsonpCallback:"localHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
             success: function(json){
                 $('body').append('<h2>您查询到火车票信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。</h2>');
             },
             error: function(){
                 alert('fail');
             }
         });
     });
     </script>
</body>
</html>

b域名处理程序 test.php

header('Content-Type:application/json; charset=utf-8');
$callback='localHandler';
$data=array(
    'price'=>100,
    'tickets'=>56
);
echo $callback.'('.json_encode($data).');';

通过上述例子,看到没有,jsonp其实也没有那么复杂,说白了,就是后台生成的json字符串,并且在字符串外面包含一个回调函数名称+左右括弧,然后ajax通过jsonp协议请求后台数据,从而实现了跨域。

怎么知道某个API是否支持跨域读取?
这个api返回的Header信息中,属性 Access-Control-Allow-Origin 可以了解到该api是否支持跨域读取数据,基本上很多API是不允许跨域的。

php全栈工程师在成长(5)--开始PHP

评论 (0条)