zoukankan      html  css  js  c++  java
  • Ajax

    function ajax(method, url, data, success) {   //success是一个回调函数
    	var xhr = null;
    	try {
    		xhr = new XMLHttpRequest();
    	} catch (e) {
    		xhr = new ActiveXObject('Microsoft.XMLHTTP');
    	}
    	if (method == 'get' && data) {  //url在get方式的时候是可变的;如果有data存在并且方法是get的时候
    		url += '?' + data;   
    	}
    	xhr.open(method,url,true);
    	if (method == 'get') {
    		xhr.send(null);  //send()一个参数,请求发送的数据,如果没有必须null
    	} else {
    		xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); //POST方式在send之前,要设置请求头,告知文档类型
    		xhr.send(data);
    	}
    	
    	xhr.onreadystatechange = function() {
    		
    		if ( xhr.readyState == 4 ) {
    			if ( xhr.status == 200 ) {
    				success && success(xhr.responseText);   //如果success存在的话就执行函数
    			} else {
    				alert('出错了,Err:' + xhr.status);
    			}
    		}
    		
    	}
    }

    小应用:

    oBtn.onclick = function() {
    		
    		ajax('get','getNews.php','',function(data) {
    			var data = JSON.parse( data );  //转换
    				
    			var oUl = document.getElementById('ul1');
    			var html = '';
    			for (var i=0; i<data.length; i++) {
    				html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
    			}
    			oUl.innerHTML = html;
    		});
    		
    		setInterval(function() {    //定时刷新获取数据
    			ajax('get','getNews.php','',function(data) {
    				var data = JSON.parse( data );
    					
    				var oUl = document.getElementById('ul1');
    				var html = '';
    				for (var i=0; i<data.length; i++) {
    					html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
    				}
    				oUl.innerHTML = html;
    			});
    		}, 1000);
    	}
    

    ajax学习:

    http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6000

  • 相关阅读:
    JVM结构
    redis缓存淘汰策略
    idea常用快捷键
    Spring常用注解
    redis持久化
    crontab定时调度
    redis五种数据类型
    LVM实验报告
    fdisk以及parted分区实验
    fdisk与parted的区别以及parted为何可分128个区
  • 原文地址:https://www.cnblogs.com/webcome/p/5426538.html
Copyright © 2011-2022 走看看