jq的ajax学习

ajax --前后台分离开发 api(程序应用集---数据接口)
局部刷新技术
异步请求（请求和后续代码同时执行）同步请求（等待请求执行完成在执行后续代码）
专门做后台数据的访问的
先学习原生js的ajax 对象 XMLhttprequest 对象后台数据访问的对象
原生js在访问后台数据的时候专门写
1.实例化对象
2.open 连接远程服务器参数： method 请求的方式 get post url:请求的服务器路径
async 当前的请求是同步还是异步 true 异步 false 同步 user 用户名 password 密码

send() 发送请求
4.响应事件onreadystatechange
5.渲染界面

var http = new XMLHttpRequest();
 //2.建立服务器连接
 http.open("get", "./data/student.txt");
 //3.发送请求
 http.send();
 //4.服务器响应
 http.onreadystatechange = function () {
 //5.界面的渲染
 //判断   获取最终读取完成状态
 if (http.readyState == 4) {
 //返回的数据都是string
 //console.log(typeof http.responseText);
 console.log(http.response);
 //字符串类型的json数据转化为对象型json  JSON.parse()
 var data = JSON.parse(http.response);
 console.log(data);
 //对象json转化为string json  JSON.stringify
 //var strdata=JSON.stringify(data);
 //console.log(strdata);
 }

 }

//原生ajax的封装
function method(meth, url, data, async, callback) {
    //对象的创建
    var http = new XMLHttpRequest();
    //判断
    if (meth == "get") {
        //get 传递的数据在路径的后边  www.baidu.com?name=1&s=2
        if (data) {
            url += "?";
            url += data;
        }
        http.open(meth, url, async);
        http.send();
    }
    else {
        http.open(meth, url, async);
        //判断是否有数据
        if (data) {
            http.send(data);
        }
        else {
            http.send();
        }
    }
    //响应
    http.onreadystatechange = function () {
        //状态的判断
        //状态码  200 success  500  服务器报错 404  服务器端页面丢失
        if (http.readyState == 4 && http.status == 200) {
            //将请求的数据返回
            callback(http.response);
        }

    }
}

//域名解析就是localhost   没有写端口号默认80端口
//协议不一致会产生跨域
//端口不一致也会导致跨域
//域名不一致也会产生跨域
/*
 * http://www.maodou.com/mao/list.html
 * https://www.maodou.com/mao/list.html
 * http://www.maodou.com:8080/mao/list.html
 * http://www.dou.com/mao/list.html
 * */

//跨域怎样解决
//cros 资源共享在后端进行配置配置完成之后可以直接访问
//例如php 在后端文件里面写入一句话 header("Access-Control-Allow-Origin:"); 代表所有
//jsonp 跨域在原生js里面叫src跨域直接使用路径
//src可以连接远程路径
//直接使用script src属性直接连接后台的api进行远程访问
//在路径的后边带一个回调函数就好了后台的处理传回的回调函数
//下面演示jsonp 跨域的问题

//jsonp跨域原理是在前端上使用src进行跨域在接口上传入要执行的回调函数（后台一定要处理回调函数这样前台的函数才有响应）
2.jquery里面的ajax请求

$.ajax({
     method:"get",//请求的方式  type
     url:"", //路径
     data:{},//传递的参数
     dataType:"",//数据类型
     jsonpCallback:"",//jsonp  跨域的
     success:function (res){
     //成功
     },
     error:function (){
     //请求失败
     },
     async:true//设置同步异步的
     });

猜你喜欢