web(ajax)

一、ajax简介

ajax是一种局部刷新技术，用于访问后台数据。它允许通过与场景后面的 Web 服务器交换数据来异步（即请求和后续代码同时执行）更新网页，这意味着可以更新网页的部分，而不需要重新加载整个页面 。

ajax工作原理

二、js ajax

• js中用于同幕后服务器交换数据的对象为：XMLHttpRequest对象

• 原生js ajax 不要设置同步请求，原生js为单线程

• 访问后台数据的五个步骤

1. 实例化对象

 var xmlhttp=new XMLHttpRequest();

2. 建立远程服务器

xmlhttp.open(method,url,async,user,password);

//open()方法，该方法参数为

/*参数一：method(请求方式)：get/post  区别如下：
* get:  在请求数据接口时传入data参数时，data拼接在请求的服务器路径 url 之后 即 
*       url+"?"+name1=value1&name2=value2
* post: 在请求数据接口时传入data参数时，data作为发送请求的方法send()的参数传入
*/

/*参数二：url(请求服务器路径)*/

/*参数三：saync(请求时同步还是异步)：true false
*true  异步请求 请求与后续代码同时执行
*false 同步请求 等待请求执行完之后，再执行后续代码
*/

/*参数四：user  用户名*/
/*参数五：password  密码*/

3. 发送请求

xmlhttp.send();   

4. 响应事件

xmlhttp.onreadystatechange=function(){
    //状态的判断   获取最终读取完成状态
     if(http.readyState==4 && http.status==200){
          //status 状态码  
          //200 success  500  服务器报错  404  服务器端页面丢失
          
          //返回的数据（均为string类型）
           http.responseText
           http.response
           
           //将字符串类型的json数据转化为对象型json 用：JSON.parse()
           JSON.parse( http.responseText);
           
          //将对象型json数据转化为string类型的json  用：JSON.stringify
          JSON.stringify(strdata);
          
          5. 渲染页面（在响应事件内部进行渲染）
    }
}

• 封装的post get 两种请求方式的方法

//关于data参数：需要传参时，data的格式怎么写
//get传入  data格式与路径后面的数据形式一致
//post传入 data可以写成json，也可以与get后的格式一致

 function method(meth,url,data,async,callback){
        var xmlhttp=new XMLHttpRequest();
        if(meth=="get"){
            if(data){
                url+="?";
                url+=data;
            }
            xmlhttp.open(meth,url,async);
            xmlhttp.send();
        }else{                      //meth=="post"
            xmlhttp.open(meth,url,async);
            if(data){
                xmlhttp.send(data);
            }else{
                xmlhttp.send();
            }
        }
        xmlhttp.onreadystatechange=function(){
            //readyState 判断完成请求的状态；
            //status 状态码
            if(xmlhttp.readyState==4 && xmlhttp.status==200){
                callback(xmlhttp.response);
            }
        }
    }

• js ajax 请求跨域问题

产生跨域的三种情况
1.协议不一致
2.域名不一致，域名解析出来即为localhost
3.端口号不一致，没有写默认端口号为80

解决跨域的两种方法：

1. cross跨域：资源共享，在后端进行配置，配置完成之后可以直接访问；

 //以php为例，在后端文件里面写入
 header("Access-Control-Allow-Origin:*"); 
 //url为php文件所在路径

 //以get请求方式为例：
 //若传入data参数，可在php文件中在php使用$_GET接收传值
 //data参数格式为"name1=value1"

2. jsonp跨域：在前端上使用src进行跨域，在接口上传入要执行的回调函数，后台一定要处理回调函数，这样前台的函数才有响应；

<script>
  //传入的回调函数
    function getdata(result) {
        console.log(result);
    }
</script>
<script src="http://localhost:8080/jsonp.php?index=1&cb=getdata"></script>

三、jQuery ajax

• jquery ajax方法中的属性与js方法的参数基本相同，以下对js中没涉及到的进行说明

 //属性一 ：dataType  返回的数据格式
  "xml": 返回 XML 文档，可用 jQuery 处理。

  "html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。

  "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

  "json": 返回 JSON 数据 。

  "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

  "text": 返回纯文本字符串

//属性二：success:请求成功执行的函数

//属性三：error：请求失败执行的函数

//属性四：timeout：允许请求超时的时间

• cross跨域

        $.ajax({
            type:"get",
            url:"https://api.help.bj.cn/apis/weather/",      //天气预报api
            data:{id:"101050101"},
            dataType:"json",    //返回的数据类型
            success:function(res){
                console.log(res);       //输出请求返回的数据，
            },
            error:function(err){
                console.log(err.statusText);  //输出错误类型
            },
            async:true,
            timeout:2000    //允许请求超时的时间
        })

• jsonp跨域

 $.ajax({
         type:"get",
         //百度关键字搜索api
         url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=火车&cb=getData",
         dataType:"jsonp",    //返回的数据类型
         jsonpCallback: "getData",    
         success:function(res){
         console.log(res);
         },
         error:function(err){
         console.log(err.statusText);  //输出错误类型
         },
         async:true,
         timeout:3000
  })

• jquery ajax的其他相关方法和事件

1. getScript() 请求载入一个js文件

 $.getScript("./jquery/jquery.js", function (res) 
       console.log(res);
 });

2. $(ele).ajaxStart：请求开始事件
3. $(ele). ajaxStop：请求停止事件
4. $(ele).ajaxSend：请求发送事件
5. $(ele). ajaxSuccess：请求成功事件

注：ajax 方法中的事件 在1.8.3 版本以下可以正常使用