Ajax
JSON的优势:
轻量级,体积小,节省流量,提高加载速度
解析成原生JS对象,解析比XML更快
查找数据无需查找标签,更快
将JOSN字符串转换为JOSN对象
方法一. var obj = eval('(' + str1 + ')');
方法二. var obj = JSON.parse(str1);
将JSON对象转化为JSON字符串
var obj2=JSON.stringify(str2);
1. 简介:
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,与服务器交换数据的技术
2. 定义
- AJAX = 异步 JavaScript 和 XML。 2) AJAX 是一种用于创建快速动态网页的技术。 3)
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。- 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
ajax特点
异步加载数据,无需切换页面 更佳的用户体验:局部刷新、及时验证等 节省流量 JS控制数据的加载,更加灵活多用
封装一个ajax
function aa (){
var ajax = ''
try{
ajax = new XMLHttpRequest();
}cath(e){
ajax = new ActiveXObject(Microsoft.XMLHTTP)
}
ajax.open('post','1.txt',true);// 参1 post或get传参 ,参2 URL路径,参3 true异步,false同步
ajax.setRequestHeader('Content-type','application/x-www-from-urle ncoded');//请求头
ajax.send('name="张三" ');用post传参要用send传递参数
ajax.onreadystatechange = ()=>{
if(ajax.readystate == 4){
if(ajax.status == 200){
console.log(ajax.response)
//ajax.responseText
//ajax.responseXML
}
}
}
}
1.XMLHttpRequest 对象
XMLHttpRequest 用于在后台与服务器交换数据.
所有现代浏览器均支持 XMLHttpRequest 对象
(IE5 和 IE6 使用 ActiveXObject)。
创建XMLHttpRequest对象
if(window.XMLHttpRequest){
var xhr=new XMLHttpRequest();
}else{
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
};
2. open(method, url, asyn)打开和服务器的连接
参数:
method:String,请求的类型 get 或 post
url:String,文件在服务器上的位置(该文件可以是任何类型的文件,比 如 .txt ,.json 和 .xml,或者服务器脚本文件,比如 .php )
asyn:Boolean,true(异步)或 false(同步)
同步需要等待返回结果才能继续,异步不必等待
var xhr=new XMLHttpRequest();
xhr.open('get', '123.txt', true); // 常用异步
不推荐使用false(同步),仅用于一些小型的请求
async:true(异步)或 false(同步)
同步需要等待返回结果才能继续,异步不必等待
同步:提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能 干任何事
异步: 请求通过事件触发->服务器处理(这时浏览器仍然可以作其他事情)-> 处理完毕
3 send( string) 发送给服务器
xhr.send(); 将请求发送到服务器(get请求)
xhr.send(string):仅用于 post 请求
与 post 相比,get 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 post 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(post 没有数据量限制)
发送包含未知字符的用户输入时,post 比 get 更稳定也更可靠
post请求需在send之前加: xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
4 XMLHttpRequest 对象的重要属性:
onreadystatechange 事件 ( 响应就绪状态 )
readyState 和 status 属性存有XMLHttpRequest 的状态
readyState 改变时就会触发 onreadystatechange 事件
readyState 从 0 到 4 发生变化:
0: 请求未初始化 未调用open()方法
1:(启动)服务器连接已建立。已经调用open()方法,未调用send()方法
2: (发送)请求已接收 。 已经调用send()方法,未接收到响应
3: (接收)请求处理中。 已经接收到部分数据
4: 请求已完成,且响应已就绪 。 已经接收到全部数据,可以在客户端使用
status 等于200:"OK" 等于404:未找到页面304(未修改) 自从上次请 求后,请求的网页未修改 过。 服务器 返回此响应时,不会返回网页内容。
当readyState为 4 且 status为 200 时,表示响应已就绪
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
responseText 获得字符串形式的响应数据
responseXML 获得 XML 形式的响应数据
如来自服务器的响应并非 XML,用 responseText 属性
responseText返回字符串形式的响应,可以这样使用:
Div.innerHTML=xhr.responseText;
GET与POST区别
GET:
更常用,更方便
性能好
明文发送数据,没有POST安全
传输数据大小有限制:数据通过URL传递,但是URL有一定长度限制。
POST:
使用相对较少
性能只有GET的1/3左右
比GET稍微安全一点
没有传输数据大小限制