回归前端学习第12天——从服务器获取数据

最新推荐文章于 2022-08-08 23:43:26 发布

Gib Gas!

最新推荐文章于 2022-08-08 23:43:26 发布

阅读量440

点赞数 1

分类专栏：前端学习文章标签： html vue.js css css3

本文链接：https://blog.csdn.net/weixin_44584059/article/details/107753310

版权

前端学习专栏收录该内容

60 篇文章 2 订阅

订阅专栏

从服务器获取数据可以用ajax，也可以直接载入服务器页面，当然用ajax是极好的！

Ajax

Ajax

Asynchronous JavaScript and XML（Ajax），倾向于使用XMLHttpRequest 来请求XML数据，使用Web API作为代理来更智能地请求数据，而不仅仅是让浏览器重新加载整个页面

优势：
1.页面更新速度更快，响应更快。
2.每次更新都会下载更少的数据，更少地浪费带宽

1.基本的Ajax请求

1.XMLHttpRequest
XMLHttpRequest 对象用于在后台与服务器交换数据。
可以实现：
1.在不重新加载页面的情况下更新网页
2.在页面已加载后从服务器请求数据
3.在页面已加载后从服务器接收数据
4.在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

xmlhttp=new XMLHttpRequest();

hange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称，当 XMLHttpRequest 对象的状态发生改变时，会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时，我们才执行代码。

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = OK
    // ...our code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}
</script>

2.GET 请求

相比于复杂的ajax而言，GET请求功能则显得更加简单，请求成功时可调用回调函数。当然如果需要在出错时执行函数，那么还请使用$.ajax。

$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});

3.POST请求

POST请求功能也相对比较简单，请求成功时可调用回调函数。如果需要在出错时执行函数，那么请使用$.ajax请求。

　$.post("/Resources/addfriend.ashx", { "fid": fids, "fname": fnames, "tuid": tuids, "tuname": tunames }, function (data) {
if (data == "ok") {
alert("添加成功！");
}
})

4.通过 HTTP GET 请求载入 JSON 数据

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});