不过这里对某些前端工程师理解起来有个坑，比如像我，什么叫客户端，什么叫服务器呢？其实他们是放在一起的一堆文件，可能只是在不同的文件夹中，所谓的客户端，就是打开浏览器能够访问的文件，所谓服务器端就是打开浏览器无法直接观看的文件，需要通过前端文件请求调用才可以感知到的文件，所以从客户端像服务器请求的过程，可以理解为从自己的index.html的文件，像php/data.php发送数据的过程，而data的php跟index的php其实就是邻居，只不过打开浏览器之后，html文件，以及html引用到的css、js文件被加载到了浏览器上，而php文件依然留在原来的位置上（也就是你的文件运行的本地服务器或者网络服务器上），但这两者依然是邻居，理解这个邻居的概念很关键，因为他可以帮助理解下一步的jsonp，即当你想要请求的php或者node等服务器文件跟你的前端文件不是邻居时，应该怎么办。回到ajax，ajax的技术其实就是邻居之间传递数据的，比如index.html中引用的index.js，需要请求数据，那么则是这样。
这种方式在我理解根本不牵涉到什么前后端数据交换，因为本来这个页面打开就是.php的后缀，html内容只不过是在这个php页面中嵌套的一部分，页面本身是按照php渲染的，自然能够解析变量到各个 echo 中。这种情况只存在php中，其他后端语音比如Node肯定没办法这么干。
<!-- to element -->
<div data-name='<?php echo $name;?>'></div>
<script>
var name = $('div').data('name');
</script>
<!-- to js -->
<script>
window.data = {
name: <?php echo $name;?>,
age: <?php echo $age;?>
}
</script>
<script>
var name = data.name;
</script>浏览器打开某个网址，可以理解为浏览器从web服务器请求数据加载的一个过程。既请求页面的所有数据，然后加载。 当然我们都知道，页面当中并不是所有数据需要立即加载过来的，同时加载过来的数据也是有可能变化的，这也就是ajax出现的意义。 AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。 核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。 但现在一般情况下已经不必深究XMLHTTPRequest的用法。因为常用的框架已经封装好了。 ajax是一种典型的CS数据交换模型，既客户端像服务器端请求数据，服务器端回复数据。相比与php赋值的方法，这种情况需要客户端主动触发请求，服务器才会被动响应请求回复数据。
// 这里直接用jquery封装好的ajax了，我们在今天所熟悉的ajax都是已经被封装好了的，用法简答，以至于我们都不在关心本来的ajax是如何使用的了，好吧，先这样吧
$.ajax({
url: '../php/data.php',
method: 'GET',
data: {data: 'hello'},
success: function(data) {
alert(data)
}
})// 其实这两个文件的位置就只是 js/index.js,以及php/data.php而已
if (isset($_GET)) { // ajax 请求过的数据一般为 get 或者 post，php 文件响应回复 echo 即可。
echo $_GET['data']; // 把前端的 穿过来的 data hello 再回复过去，所以js文件收到后会alert('hello');
}if (isset($_GET)) {
echo "<xml version='1.0'>";
echo "<msg>";
echo "<name>shawn</name>"";
echo "<age>20</age>";
echo "</msg>";
}if (isset($_GET)) {
$data = array(
'name' => 'shawn',
'age' => '20'
)
echo jsonencode($data)
}// js解析时就可以这样
$.ajax({
url: 'php/data.php',
method: 'GET',
success: function(data) {
var data = JSON.parse(data);
var name = data.name;
var age = data.age;
}
});
// 甚至更简单,getJSON方法会自动解析json变成一个对象，直接调用即可
$.getJSON('php/data.php', function(data) {
var name = data.name;
var age = data.age;
})刚刚谈到了ajax的邻居的概念，也就是说ajax只能请求同一个服务器上的文件，也就是ajax请求的文件都在同一个电脑上，如果ajax想要请求一个不在一个电脑上的文件呢？也就是网络上的某个服务器上的文件时怎么办呢，ajax肯定是不行了，（jquery把jsonp封装到了ajax中，但其实这是两种不同技术，分开理解比较好，既虽然在jquery中jsonp的用法依然是$.ajax,但理解时依然要分开理解），于是就有了jsonp，但jsonp其实是一种非官方的，但大家都用习惯了的一种用法。它的由来可以通过下面的例子来理解。
大家发现ajax不能够跨域（请求两个服务器上的文件就叫跨域），但大家发现前端中是有可以跨域的用法的，比如src属性，举个例子
<img src='http://baidu.com/******.png'>
<script src='http://google.com/jquery.js'></script>资料
原生
前端：
后端