动态的前后端的数据交互

最新推荐文章于 2024-09-06 12:37:08 发布

qq_42164670

最新推荐文章于 2024-09-06 12:37:08 发布

阅读量582

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_42164670/article/details/88955755

js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了三种常见的跨域请求处理方法：使用JSONP绕过同源策略限制、通过jQuery的ajax实现跨域请求以及使用原生的XMLHttpRequest进行跨域请求。每种方法都附带了具体的实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：jsonp

JSONP原理：
浏览器只对XHR(XMLHttpRequest)请求有同源请求限制，而对script标签src属性、link标签ref属性和img标签src属性没有这这种限制，利用这个“漏洞”就可以很好的解决跨域请求。JSONP就是利用了script标签无同源限制的特点来实现的，当向第三方站点请求时，我们可以将此请求放在

//数据渲染：
function getData(data) {
   // data 数组
   /*data.forEach(function (item,index) {
   list.innerHTML += '<li><img src="'+item+'" alt=""></li>'
    })*/
}

//jsonp函数：
createJsonp();
function createJsonp() {
	var s = document.createElement('script');
    s.src ='http://tanzhouweb.com/taobao/tbData.php?title=banner&jsonp=getData';
    document.body.appendChild(s);
 }

方法二：jQuery的ajax

 $.get(
     'http://tanzhouweb.com/taobao/tbData.php',
      {
        title:'banner'
      },
      function (data) {
      //console.log( data ); // 字符串
          JSON.parse(data).forEach(function (item,index{
          list.innerHTML += '<li><img src="'+item+'" alt=""></li>'
          })
      }
  );

方法三：原生ajax

var xhr = new XMLHttpRequest();
xhr.onreadystatechange= function () {
	if(xhr.readyState===4){
		if(xhr.status>=200&&xhr.status<300||xhr.status===304){
		    console.log( JSON.parse(xhr.response) );
		 }
	}
}    
xhr.open('get','http://tanzhouweb.com/taobao/tbData.php?title=banner',true);
xhr.send();