Ajax知识点

最新推荐文章于 2022-05-05 15:21:18 发布

CookChopper

最新推荐文章于 2022-05-05 15:21:18 发布

阅读量61

点赞数

分类专栏：努力学前端

本文链接：https://blog.csdn.net/hjc13348/article/details/113863368

版权

努力学前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

Ajax与JSON

	//XMLHttpRequest对象，是一个异步调用对象，是Ajax的核心
	//创建的步骤
	//1.创建XMLHttpRequest对象
	//2.创建一个新的HTTP请求，并指定HTTP请求的方法，URL，
	//3.设置响应HTTP请求状态变化的函数

	//注意：如果是HTTP表单请求post数据的，需要添加HTTP头，使用setRequestHeader()
	//使用：xhr.setRequestHeader("Content-type","application/x-www-from-urlecoder");
	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax案例</title>
    <link rel="stylesheet" href="css/ajaxstyle.css">
</head>
<body>
    <div class="banner" id="banner"></div>
    <script>
        //封装一个XHR函数，兼容各个版本
        function createXHR(){
            var xhr;
            //兼容 IE7+,Firefox,Chrome,Opera,Safari
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
            //兼容 IE6,IE5
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;
        }
        //调用
        var xhr = createXHR();
        var data = null;  //用于接收服务端返回数据

        //相应XMLHttpRequest对象状态变化的函数
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 ){
                if((xhr.status>=200&&xhr.status<300)||xhr.status===304){
                    data = JSON.parse(xhr.responseText);
                    // console.log(data);
                    renderDataToDom();
                }else{
                    console.log("unsuccess");
                }
            }
        }
        //创建HTTP请求
        xhr.open('get','./ajax/server/slider.json',true);
      	
        //发送HTTP请求
        xhr.send(null);

        //渲染数据
        function renderDataToDom(){
            var img = data.slider,
                i,len=img.length,
                str="",
                banner = document.getElementById("banner");
                for(i=0;i<len;i++){
                    str+= '<a href="'+img[i].linkUrl+'"><img src="'+img[i].picUrl+'"></a>';
                }
                //渲染图片信息
                banner.innerHTML = str;
        }
        
    </script>
</body>
</html>

jQuery的ajax

	jQuery的Ajax方法
	$.ajax();
	$.get();
	$.post();
	$.getJson();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax_jQuery</title>
    <link rel="stylesheet" href="css/ajaxstyle.css">
</head>
<body>
    <div class="banner" id="banner"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        $.ajax({
            url:"./ajax/server/slider.json", 	//请求地址
            type:"post",	//请求方法
            dataType:"json",	//数据返回格式
            async:true,			//异步/同步
            success:function(datas){//成功响应的回调函数
                renderDatasToDom(datas.slider);
            }
        });
        //jquery渲染数据
        function renderDatasToDom(data){
            var str="";
            $.each(data,function(index,obj){
                str+='<a href="'+obj.linkUrl+'"><img src="'+obj.picUrl+'"></a>';
            })
            $("#banner").html(str);
        }
    </script>
</body>
</html>

##关于Ajax中的跨域请求

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax_demo2</title>
</head>
<body>
    <script>
        //跨域 封装一个JSONP函数
        function getJSONP(url,callback){
            if(!url){
                return;
            }
            var arr = ["a","b","c","d","e","f","g","h","i","j"];
            var r1 = Math.floor(Math.random()*10);
            var r2 = Math.floor(Math.random()*10);
            var r3 = Math.floor(Math.random()*10);
            var name = "getJSONP"+arr[r1]+arr[r2]+arr[r3];
            var cbname = "getJSONP."+name;
            // console.log(name);
            if(url.indexOf('?')===-1){
                url += "?jsonp="+cbname;
            }else{
                url += "&jsonp="+cbname;
            }
            // console.log(url);
            var script = document.createElement('script');
            //定义被脚本执行的回调函数
            getJSONP[name] = function(e){
                try{
                    callback && callback(e);
                }catch(e){

                }finally{
                    delete getJSONP[name];
                    script.parentNode.removeChild(script);
                }
            }
            script.src = url;
            document.getElementsByTagName("head")[0].appendChild(script);
        }
        getJSONP('http://class.imooc.com/api/jsonp',function(res){
            console.log(res);
        });
    </script>
</body>
</html>

CookChopper

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax知识点

Ajax与JSON //XMLHttpRequest对象，是一个异步调用对象，是Ajax的核心 //创建的步骤 //1.创建XMLHttpRequest对象 //2.创建一个新的HTTP请求，并指定HTTP请求的方法，URL， //3.设置响应HTTP请求状态变化的函数 //注意：如果是HTTP表单请求post数据的，需要添加HTTP头，使用setRequestHeader() //使用：xhr.setRequestHeader("Content-type","application..
复制链接

扫一扫