异步加载之ajax

1 XMLHttpRequest

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

var xmlhttp;
if (window.XMLHttpRequest)
{
//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2 open&send

方法	参数
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string) 将请求发送到服务器。	string：仅用于 POST 请求

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

懒得详细写了。。。详情

下面是laravel项目中的自己胡乱搞的一个动态加载的demo：

对应的效果(下面的新闻)

<script>
//ajax动态加载
var page = 0;
window.onload = function() { //页面加载触发点击加载
document.getElementById("btn").click();
};
$.ajaxSetup({ //laravel csrf验证
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
function add(){

$.ajax({
dataType:"html",
url:'/companynews_adax/'+page+'/'+'{{$company->name}}',
type:'get',

success:function(news) {
var items = JSON.parse(news);
if(page!=0) {
for (var i=0;i<items.length;i++)
$("#template").remove();
}
$.each(items, function(i, obj) {
$("#template").clone(true).insertBefore($("#template"));
$("#template").attr('style', 'display:block');

$("#newsTitle").text(obj[1]);
$("#newshref").attr('href',obj[0]);
$("#newsSource").text(obj[3]);
$("#newsTime").text(obj[2]);
});
page++;
}
});
};

$("#btn").click(function(event) {
add();
});
</script>