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标签加载对应远程文件资源，当远程的文件资源被加载进来的时候，就会去执行我们前面定义好的函数，并且把数据当做这个函数的参数传入进去
网友评论