Ajax之深入了解

上一节，我们说了一些Ajax的基础知识，包括常用的get方法，现在，我们接着来讲讲post方法，以及利用get方法或post方法实现分页显示的功能。
    我们使用的是nodejs，去nodejs官网下载安装后，在webstrom编写代码，将所有代码放在public文件夹里，然后在terminal控制台开启服务（npm start），之后在网页上输入localhost:3000/文件名.html。
    以下我们来说说get和post两种方法的区别。详见代码

<script> //get方法 //创建Ajax对象 var xhr = new XMLHttpRequest(); //创建链接 xhr.open('get','/getcity?city='+city.value); //发送请求 xhr.send(); //接收返回值 xhr.onreadystatechange = function(e){ if(xhr.readyState == 4){//完成 if(xhr.status == 200){//成功 alert(xhr.response) } } e.preventDefault(); }; //get方法 //创建Ajax对象 var xhr = new XMLHttpRequest(); //创建链接 xhr.open('post','/postcity'); //添加请求头 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //发送请求 xhr.send('city='+city.value); //接收返回值 xhr.onreadystatechange = function(e){ if(xhr.readyState == 4 && xhr.status == 200){ alert(xhr.response); } e.preventDefault(); }; </script>

作为前端程序员，后台的数据我们很少涉足，但是有些接口还是需要了解一些，毕竟，前端和后台的分解不是那么明显，下面我们简单的写两个接口比较、了解一下。

//get
router.get('/getcity',function(req,res,next){
  var city = [{value:'beijing',name:'北京'},{value:'shanghai',name:'上海'}];
  res.send(city);
  res.end();
});

//post
router.post('/postcity',next){
  var city = req.body.city;
  console.log(city);
  res.send('您选择的城市是'+city);
  res.end();
});

以上就是对Ajax的小小总结，接下来我们来写一个分页显示的实例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style> a{ text-decoration: none; display: inline-block; width: 20px; height: 20px; border: 1px solid #ccc; text-align: center; margin: 5px; color: red; } ul{ list-style: none; } </style>
</head>
<body>
<div id="box">
</div>
</body>
<script src="../routes/data1.js"></script>
<script> var size = 10; document.body.addEventListener('click',function(e){ var e = e || event; if(e.target.tagName == 'A'){ getData(parseInt(e.target.innerText)); } e.preventDefault(); }); getData(1); function getData(index){ var xhr = new XMLHttpRequest(); xhr.open('get','/song?index='+index+'&size='+size); xhr.responseType = 'json'; xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ doResult(xhr.response); } }; xhr.send(); } function doResult(data){ var json = data; var html = ''; for(var i = 1; i <= json.count; i++){ html += '<a href="javascript:;">'+ i +'</a>' } var box = document.getElementById('box'); box.innerHTML = html; var ul = document.createElement('ul'); box.appendChild(ul); json.data.forEach(function(item){ var li = document.createElement('li'); li.innerHTML = '<img src="'+ item.cimgurl +'"/>'; ul.appendChild(li); }) } </script>
</html>

后台接口

router.get('/song',function(req,next){
  var index = req.query.index;
  var size = req.query.size;
  var count = travel.length/size;
  console.log(index +''+ size);
  var dataPage = travel.slice((index -1)*size,index * size);
  res.contentType('application/json');
  res.send({allrecord:travel.length,count:count,data:dataPage,index:index});
  res.end();
});

图片资源是一个单独的文件夹，由于内容太多，这里我就不再上传，有兴趣的同学可以自己试试哦

Ajax之深入了解

相关文章