AJAX初步认识

简介

1.ajax介绍

ajax = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

ajax不是新的编程语言，而是一种使用现有标准的新方法。

ajax是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

2.工作原理

异步时ajax技术的核心，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

整个Ajax应用的工作过程如下：

JS脚本使用XMLHttpRequest对象向服务器发送请求。发送请求时，就可以是get请求，也可以是post请求。
JS使用XMLHttpRequest对象解析服务器响应数据。
操作数据，一般用于更新HTML页面。

3.XMLHttpRequest

整个Ajax技术的灵魂。Ajax技术的核心就是异步发送请求，而XMLHttpRequest则是异步发送请求的对象。

3.1XMLHttpRequest属性和方法

属性：

onreadystatechange
该属性用来指定xhr对象状态改变时的事件函数。
readyState
有以下几种状态：
0：XMLHttpRequest对象还没完成初始化。（请求未初始化）
1：对象开始发送请求。（服务器连接以建立）
2：对象的请求发送完成。（请求以接收）
3：对象开始读取服务器的相应。（请求处理中）
4：对象读取服务器相应结束。（请求完成，响应就绪）
status
常见的服务器响应码如下：
200 OK：服务器响应正常。
304 Not Modified：该资源在上次请求后没有任何修改。通常用于浏览器的缓存（get请求导致的缓存，加一个随机参数可解决，下面会说到）。
400 Bad Request：语义有误，当前请求无法被服务器理解或者请求参数有误。
403 Forbidden：服务器已经理解请求，但是拒绝执行它。
404 Not Found*：请求失败，请求所希望得到的资源未被在服务器上发现。（大家都懂的。。。多少人满心欢喜的打开界面结果见到了这个。。）
500 Internal Server Error*：内部服务器错误。一般来说，这个问题都会在服务器端的源代码出现错误时出现。
504 Gateway Timeout：请求超时。
statusText
见status
responseText
该属性用于获取服务器的响应文本。
responseXML
该属性用于获取服务器响应的XML文档对象。

方法：
- abort()：停止发送当前请求。
- getAllResponseHeaders()：获取字符串形式的服务器返回的所有响应头。
- getResponseHeader(‘headerLabel’)：根据响应头的名字，获取对应的响应头。
- open(method,url,async)：建立与服务器url的连接，以及是否使用异步（true/false）。如果远程服务器需要账号密码，则提供对应信息
- send(content)：发送请求，其中content是参数。由于兼容性原因，建议在get请求时send()中传入 ‘null’。
- setRequestHeader(‘label’,‘value’)：在发送请求（send）之前，先设置请求头。

3.2XMLHttpRequest简单实例

get请求：

<body>
<label for="username">姓名:</label><input type="text" id="username"/><br/>
<label for="age">年龄:</label><input type="text" id="age"/><br/>
<input type="button" value="GET" id="btn" onclick="btn_click();"/>
<div id="result"></div>
</body>

<script type="text/javascript"> function btn_click() { //创建XMLHttpRequest对象 var xmlHttp = new XMLHttpRequest(); //获取值 var username = document.getElementById("username").value; var age = document.getElementById("age").value; //配置XMLHttpRequest对象. open(method,async) xmlHttp.open("get",'a.PHP?username='+username+"&age="+age,true); //设置回调函数. onreadystatechange:该属性用来指定xmlHttp对象状态改变时的事件函数 xmlHttp.onreadystatechange = function () { // 4:对象读取服务器相应结束。200:服务器响应正常。 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { //responseText:该属性用于获取服务器的响应文本。 document.getElementById("result").innerHTML = xmlHttp.responseText; } } //发送请求 xmlHttp.send(null); } </script>

a.PHP 代码：

<?PHP header('content-type:text/html;charset=utf-8'); $username = $_GET['username']; $age = $_GET['age']; echo "你的名字是$username,年龄是$age " ; ?>

运行结果：

post请求：
post传参时与get的不同是它的参数放在send中。只需修改部分代码，具体如下：

xmlHttp.open("post",'b.PHP',true);
xmlHttp.setRequestHeader('content-type','application/x-www-form-urlencoded');
xmlHttp.send('username='+username+'&age='+age);

b.PHP 代码：

<?PHP
  $username = $_POST['username'];
  $age = $_POST['age'];
  echo "你的名字是$username,年龄是$age " ;
?>

运行结果跟上面一样，只是方式不一样。

4.通过JSONP实现AJAX跨域请求

4.1 简介：

JSON：javascript Object Notation 是一种轻量级的数据交换格式。
JSONP：JSON with Padding 是JSON的一种“使用模式”，通过这种模式可以实现数据的跨域获取。
跨域：出于安全考虑，页面的javascript无法访问其它服务器上的数据，即“同源策略”。而跨域是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。

4.2 如何实现跨域

通过script标记
通过JSONP实现ajax跨域请求
通过Cross－Origin Resource Sharing

4.3 代码

1.js实现：

<script> //回调的result : Object {id: 1,username: "zyzhang",email: "zhangtaihu101@163.com"} function jsonpCallback(result) { alert('用户名：'+result.username+'\n'+'邮箱：'+result.email); } //动态创建一个script标签 var script = document.createElement('script'); //跨域请求的地址 script.src='1-jsonp.PHP?callback=jsonpCallback'; //加入到head中 document.getElementsByTagName('head')[0].appendChild(script); </script>

PHP 代码：

<?PHP
$callback=$_GET['callback'];

$userInfo=array('id'=>1,'username'=>'zyzhang','email'=>'zhangtaihu101@163.com');

$result=json_encode($userInfo);

echo $callback."({$result})";
?>

2.ajax实现

<body>
<button id="btn1">ajax请求</button>
<script> $(function () { $('#btn1').on('click',function () { $.ajax({ url: '2-jsonp.PHP',type: 'GET',dataType:'json',success: function (data) { console.log(data); alert('用户名：' + data.username + '\n' + '邮箱：' + data.email); },error: function () { alert('error') } }); }); }); </script>
</body>