总结Ajax的一些细节
Ajax的总结
- 主要从Ajax是什么?可以用来干什么?基本要素,优缺点,执行过程,跨域的解决方案等几方面来解释。
Ajax是什么?
- Ajax主要用来实现客户端与服务器端的异步通信效果,实现页面的局部刷新,早期的浏览器并不能原生支持ajax,可以使用隐藏帧(iframe)方式变相实现异步刷新,使用ajax原生发送请求主要通过XMLHttpRequest对象实现异步通信的效果。
Ajax的工作原理
- 简单来说通过XmlHttpRequest对象来向服务器发送异步请求,从服务器获得数据,然后利用javascript来操作DOm而更新页面,这其中最关键的一步就是从服务器获得请求数据
Ajax要素
- 实现原生Ajax的核心就是 XMLHttpRequest
- Ajax请求的重点内容:
- 请求方式:get/post
1、get一般用来进行查询操作,url地址有长度限制,请求的参数都暴露在url地址当中,如果传递中文参数,需要自己进行编码操作,安全性较低。
2、post请求方式主要用来提交数据,没有数据长度的限制,提交的数据内容存在于http请求体中,数据不会暴漏在url地址中。 - 响应内容:xhr.responseText;(重点)xhr.responseXML
- 请求方式:get/post
- 原理:利用script标签向外发出请求不会被拒绝
- ajax的优缺点
- 优点:可以使得页面不重载全部内容的情况下加载局部内容,降低数据传输量,避免用户不断刷新或者跳转页面,提高用户体验。
- 缺点:
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
Ajax的异步刷新
- iframe 在一个页面内部嵌入一个子页面
- name属性表示iframe的名称,用于区分不同的iframe
- iframe属性frameborder表示子页面的边框
- width和height分别表示子页面的宽高
- src属性表示嵌入子页面的url地址
- 可以通过表单的target属性指向iframe的name属性值,表示响应内容在子页面刷新
<div id="info"></div>
<form action="./inner.php" method="post" target="abc">
用户名:<input type="text" name="username">
密 码:<input type="password" name="password">
<input type="submit" value="提交">
</form>
<iframe width="0" height="0" frameborder="0" name="abc"></iframe>
<?php
$uname = $_POST['username'];
$pw = $_POST['password'];
// js中的parent表示父级页面
if($uname == 'admin' && $pw == '123'){
echo '<script> parent.document.getElementById("info").innerHTML = "登录成功";</script>';
}else{
echo '<script> parent.document.getElementById("info").innerHTML = "用户名或者密码错误";</script>';
}
?>
ajax的基本操作步骤
- 执行过程
// 1、创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 2、配置发送参数
xhr.open('get','./data.php');
// 3、执行发送动作
xhr.send(null);
// 4、处理响应
xhr.onreadystatechange = function(){
if(xhr.status == 200){
if(xhr.readyState == 4){
// 在这里才可以获取服务器返回的数据
var result = xhr.responseText;
if(result === '1'){
var info = document.getElementById('info');
info.innerHTML = '服务器数据已经返回';
}
}
}
}
- 封装
function myajax(type,url,param,callback){
// 1、创建xhr对象
var xhr = null;
if(window.XMLHttpRequest){
// 标准写法
xhr = new XMLHttpRequest();
}else{
// IE的写法
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
// 2、准备发送参数
if(type == 'get'){
// 处理get请求参数,并且进行编码
url += '?' + encodeURI(param);
}
xhr.open(type,url);
// 3、执行发送动作
var data = null;
if(type == 'post'){
// 如果是post提交,那么就把参数传递给send
data = param;
// post提交必须设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
}
xhr.send(data);
// 4、处理响应(指定回调函数)
// 下面的回调函数什么时候执行?不确定的
xhr.onreadystatechange = function(){
// 判断响应的状态
if(xhr.status == 200 && xhr.readyState == 4){
// 获取响应数据
var result = xhr.responseText;
// 调用回调函数
callback(result);
}
}
}
ajax的跨域解决方案
jsonp,是一种解决方案,默认是get请求,如果有需求是post请求的话,可以使用CORS跨域资源共享,客服了ajax只能同源请求的限制,实现CORS通信的关键是服务器,只要服务器实现了CORS接口,就可以跨域通信。
浏览器将CORS请求分为俩大类,简单强求和非简单请求
ajax的优点和缺点
- 优点
可以实现异步通信的效果,实现局部刷新,带来更好的用户体验,按需获取数据,节约带宽资源。 - 缺点
ajax不支持浏览器的back按钮。
安全问题(暴露了与服务器交互的细节)。
破坏了程序的异常机制。
对搜索引擎的支持性比较弱。