Ajax

Ajax

js中Ajax原理的步骤：五步   四步的话：4.5结合

        (1.创建ajax对象:

兼容： var xhr = null; if(window.XMLHttpRequest){ //console.log(2) xhr = new XMLHttpRequest(); }else{ //console.log(1) xhr = new ActiveXObject("Microsoft.XMLHTTP") }

        (2.建立连接

        get请求中如何处理缓存和乱码的问题：post请求无缓存乱码问题

1.缓存问题

问题：有出现原因：在IE中，如果同一个地址发送请求，那么IE会把请求结果储存到缓存中，他会认为url不变结果就不会变

解决：不在同一个地址请求但是还不能影响请求的结果

解决方法：在url后面添加 时间戳(new Date().getTime())"url?t"+new Date().getTime()， 或者随机数(Math.random)"url?t"+Math.random()

 

2.乱码问题

encodeURI()：按照utf-8格式编码

        

 

        xhr.open("get","url",true)

        xhr.open("post","url",true)

        get请求传参方法：("get","url?key1:value2&keyN:valueN",true)

        post请求参数：xhr.open("post","url",true)

        在open后面send前面设置请求头，setRequestHeader()

        在send里面传参 xhr.send("key1:value&key2:value2")

 

        (3.发送请求

        xhr.send() /  xhr.send(null)

 

        (4.等待响应

        xhr.onreadystatechange = function(){

            //ajax的工作状态

            0.请求未初始化

            1.已建立连接

            2.服务器已接受请求

            3.正在处理请求

            4.服务器处理请求完成，并准备就绪，返回客户端

            if(xhr.readyState == 4){

                //4.1.判断服务器状态通过哪个属性？status

                //4.2.200和304的区别？

                //4.3.获取其他的状态码？

                //4.4.获取服务器返回的结果通过那个属性获取？获取的是字符串类型的数据：responseText，获取的是XML类型的数据：responseXML

                //4.5.字符串转JS对象：JSON.parse()    对象转字符串：JSON.stringfiy()

                //4.6.get与post请求的区别

* 1.安全角度上：get方式相对不安全,传递参数时，参数会暴露到url中

* post相对安全

* 2.传输数据大小上：由于get方法传递数据是拼接在url后面，而url大小有限制，所以get方式传参大小较小

而post方式传参理论上没有限制

* 3.从应用场景上：get主要用来获取数据，也可以发送数据，发送数据时一般用于查询

post请求多用于向服务器发送一些重要数据

* 4.get有请求缓存和乱码问题，post没有

* 5.get请求发送参数拼接在url?后面，post请求需要放在请求主体中

if(xhr.status == 200 || xhr.status == 304){}

        (5.解析数据

 

 

Ajax

Ajax:

A:async 异步

j:javascript

a:and

x:xml

异步的javascript和xml

 

为什么学习Ajax？

与服务器数据交换的技术，实现页面局部刷新，不需要加载整个界面，提高性能

 

在jquery中的ajax使用方法

做异步请求的方式(工具)

写法：$.ajax():接受一个对象作为参数

对象里面是关于请求的配置信息

请求：

url ：请求地址

type ：请求类型 get请求 post请求

data ：向后端发送json数据

success：function(){} ：表示请求成功的函数

error：function(){} ：表示请求失败的函数

complete：function(){} ：表示无论请求成功或失败都执行的函数

 

 

$.ajax({ url:"",//请求地址，后端将写好的文档 type:"get", //get和post 默认get data:{},//data的格式是json数据或者字符串，向后端发送的数据 success:function(){},//请求成功的回调函数，请求成功的结果作为这个函数的参数 error:function(){},//请求失败的回调函数，请求失败的原因作为函数的参数 complete:function(){}//无论请求成功还是失败都会执行的函数，请求的结果作为这个函数的参数 })

 

 

js中的ajax的使用流程与步骤

//1.创建ajax对象 var xhr = new XMLHttpRequest()

//2.建立连接 xhr.open("请求方式","请求地址","是否异步") 三个参数：

　　1.请求方式：get || post 必填

　　2.请求地址：url 必填

　　3.是否异步：异步：true 同步：false 可选，不写默认true

//3.发送请求 xhr.send()

//4.等待响应 执行时间：onreadystatechange,这个事件描述ajax的工作流程的状态变化， 每次ajax工作状态变化时都会执行这个方法 xhr.onreadystatechange = function(){

　　 //1.判断ajax对象的状态 if(xhr.readyState ==4){

　　 //2.判断服务器状态 if(xhr.status == 200 || xhr.status == 304){

　　 //当以上两个判断条件都成立以后可以获取数据，从xhr对象里面获取，

　　 //返回的数据保存在responseText属性下面

　　 //通过responseText获取的数据返回的都是字符串 xhr.responseText

} } }

 

判断兼容问题：

var xhr = new XMLHttpRequest();

IE7及以上高版本浏览器(chrome,firefox,safari,opera)

 

var xhr = new ActiveXObject("Microsoft.XMLHTTP")

IE6、IE5及以下

var xhr if(window.XMLHttpRequest){ //console.log(2) xhr = new XMLHttpRequest(); }else{ //console.log(1) xhr = new ActiveXObject("Microsoft.XMLHTTP") }

 

readyState:描述的是ajax的工作状态，五个值：0-4

0.请求未初始化

1.已建立连接

2.服务器已接受请求

3.正在处理请求

4.服务器处理请求完成，并准备就绪，返回客户端

 

*http状态码：

200：请求成功，从服务器中获取数据成功

304：请求成功，从缓存中获取数据成功

403：请求无权限，fobbiden

404：请求地址找不到,not found

405：请求方法不允许，method not found

500及以上：服务器错误(后端错误)

记住这些状态码，快速定位问题的原因

 

php方法：

JSON.parse(字符串):将字符串类型的数据转换成js中的数组对象，反序列化

JSON.stringify(数组'[]'或对象'{}'):将js中的数组或对象转换成字符串类型，序列化

 

get方法请求出现的问题：

1.缓存问题

问题：有出现原因：在IE中，如果同一个地址发送请求，那么IE会把请求结果储存到缓存中，他会认为url不变结果就不会变

解决：不在同一个地址请求但是还不能影响请求的结果

解决方法：在url后面添加 时间戳(new Date().getTime())"url?t"+new Date().getTime() 或者随机数(Math.random) "url?t"+Math.random()

 

2.编码问题

encodeURI()：按照utf-8格式编码

 

get方式请求如何传参？

在url？后面去添加传的参数，每一对参数用 '=' 连接，多个参数使用 '&' 符号连接，每对参数有参数名和值

url?name=leo&age=3

 

post方式请求如何传参？

* 放在请求主体中(send)

* 使用post方法发送数据前要设置请求头，请求头写在open方法和send方法中间

* 请求头作用：前端携带一些信息，比如token(身份验证)，token是后端给前端返回的，然后前端拿到token以后再发给后端

* author：作者

* 注意：设置请求头只针对post方式，get不需要

 

//请求头 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP") } xhr.open("post","3.php",true) xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset = UTF-8") xhr.send("name=leo&age=3") xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200 || xhr.status == 304){ var msg = xhr.responseText; console.log(msg) } }

 

总结post与get方法的区别：

* 1.安全角度上：get方式相对不安全,传递参数时，参数会暴露到url中

* post相对安全

* 2.传输数据大小上：由于get方法传递数据是拼接在url后面，而url大小有限制，所以get方式传参大小大约在4kb

而post方式传参理论上没有限制

* 3.从应用场景上：get主要用来获取数据，也可以发送数据，发送数据时一般用于查询

post请求多用于向服务器发送一些重要数据

* 4.get请求有缓存和乱码问题，post没有

* 5.get请求发送参数拼接在url?后面，post请求需要放在请求主体中