关于AJAX

2019-07-06  本文已影响0人  我可以吃你的草莓么

问题描述:
比如说:我们在填写一个表单,有姓名年龄等等个人信息,当填写完毕,提交时,发现少写了一个字段,这时需要重新填写,AJAX的出现,可以实时处理响应,并不需要重新刷新页面

关于http:
一个http响应一般由三部分组成;
1.数字和文字组成的状态码,显示请求响应或者失败,例如:404,200等等
2.响应头,包含服务器的一些信息,例如服务器类型,日期时间,内容类型等等
3.响应体:响应的正文,服务器返回的字符串等等

关于XMLHttpRequest:
有两个方法,open(method,url,async),通过调用open,可以处理http请求
send(string),用open调用后通过send发到服务器,一般来说,用Get请求,所有的参数会拼到url中,所以一般不需要填写,但是用post请求的话,就必须填写参数,否则就没有意义。

获取服务器响应:
responseText:获得字符串形式的相应数据
status和statusText:以数字和文本形式返回http状态码
getAllRespinseHeader():获取所有响应报头,
getResponseHeader():查询响应中某个字段的值,需要传递参数
readyState:响应成功后得到通知,通过request.onreadystatechange 这样的事件来监听,
整个过程:

  var request = new   XMLHttpRequest();
  request.open("GET","url",true);
  request.send();
  request.onreadystatechange = function() {
    if(request.readyState === 4 && request.status === 200){
    //做一些事情
}}

但是一般来说,我们很少用原生来写,用JQ来写会大大简化操作

  $(document).raady(function(){
        $.ajax({
             type:"GET",
             url:"",
             dataType:"json",
             success:function(){  
             },
              error:function(jqXHR){
                  alert("发生错误:" +jqXHR.status);  //通过这个对象的status拿到状态码
             }
      })
})

下面是Post请求

 $(document).raady(function(){
        $.ajax({
             type:"POST",
             url:"",
             dataType:"json",
             data:{
              //需要发送的数据
            }
             success:function(){  
             },
              error:function(jqXHR){
                  alert("发生错误:" +jqXHR.status);  //通过这个对象的status拿到状态码
             }
      })
})

处理跨越:JSONP
只能支持GET请求,不支持POST请求。

 $(document).raady(function(){
        $.ajax({
             type:"POST",
             url:"",
             dataType:"jsonp",
             jsonp:'''all'
             data:{
              //需要发送的数据
            }
             success:function(){  
             },
              error:function(jqXHR){
                  alert("发生错误:" +jqXHR.status);  //通过这个对象的status拿到状态码
             }
      })
})

处理跨域二XHR2
但是XHR2不支持IE10以下版本,这时我们需要在服务器端加上header("Access-Control-Allow-Origin:");代表的是所有域名都能访问;header("Access-Control-Allow-Methods:POST,GET ");就可以实现跨域。

实例展示我会踩踩坑在下一章节展现

上一篇下一篇

猜你喜欢

热点阅读