ajax:Asynchronous JavaScript and XML 异步JavaScript和XML
用JavaScript异步形式去操作xml
数据交互,将前端数据返回给后台,从后台获取数据
过程:
1、创建一个ajax对象
// 打开浏览器
var xhr = new XMLHttpRequest();
2、在地址栏输入地址
/*
open方法:
参数
1、打开方式(get post)
2、地址
3、是否异步(true 异步)
异步:非阻塞,前面的代码不会影响后面代码的执行
同步:阻塞,前面的代码会影响后面代码的执行
*/
xhr.open('get','1.txt',true)
get方式
- 传输方式:在URL?后传送数据,
- 1、URL长度限制原因,不要通过get方式传递过长的数据,若是超出,浏览器则会把多余数据截掉,传到后台的数据就不完整
- 2、传递的数剧会被记录下来,会被缓存
- 3、只能传字符串类型
- 存在的问题:
①、缓存问题
解决,URL &后面连接一个随机数,时间戳(new Date().getTime())
xhr.open('get','2.get.php?username=zs&'+new Date().getTime(),true)
缓存问题:
传递中文产生乱码,encodeURI('中文')
post
- 传输方式:请求头 headers
- 1、大小理论上没有什么限制
- 2、不会被缓存
- 3、只能传字符串类型可传递多种数据类型(二进制等)
- 4、无需编码,先声明数据发送的编码类型
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
数据放在send()里面作为参数进行传递
什么时候用同步?
当后面的代码需要前面请求的数据时候,一般不推荐,可以用回调函数
3、提交 发送请求
xhr.send();
4、等待服务器返回内容
/*
readyState:ajax工作状态
responseText:ajax请求返回的内容就被存放到这个属性下面
on readyState change:当readyState改变的时候触发
status:服务器状态,http状态码
*/
xhr.onreadystatechange = function(){
if( xhr.readyState == 4 ){
if(xhr.status === 200){//状态码为200则为正常状态
alert(xhr.responseText);
}else{//异常状态
alert('出错了,Err:' + xhr.status);
}
}
}
数据转换:
JSON.stringify 对象转换成字符串
JSON.parse 把字符串转换成对象
要转换json,key值必须有双引号
跨域问题:
跨域:一个域名下的文件去请求了和他不一样的的域名下的资源文件,就会产生跨域请求
- 1、后端本地代理,在同路径里有个同后端文件 local proxy
- 2、script标签,JSONP JSON with padding
- JSONP原理:
1、script标签,src属性加载某个服务器下的资源
2、用script标签加载资源没有跨域问题 - 原理:
在资源加载进来之前定义好一个函数,这个函数定义一个参数(数据),函数里面利用这个参数做一些事情
然后需要的时候通过script标签加载对应远程文件资源,当远程的文件资源被加载进来的时候,就会去执行我们前面定义好的函数,并且把数据当做这个函数的参数传入进去