ajax

ajax过程详解

一、创建对象XMLHttpRequest()

  Date()对象

  ActiveXObject('Microsoft.XMLHTTP')

二、Open方法

  这个方法带有3个参数

  1、提交方式Form-method----------get(post)

  2、提交地址Form-action

  3、是否异步(同步)------------true(false)

    异步:非阻塞,前面的代码不会影响1后面的代码执行
       同步:阻塞,前面的代码会影响后面的代码的执行

三、Send方法

  发送数据请求,相当于Form的submit

四、请求状态监控

  onreadystatechange事件

    1、readyState属性:请求状态

      0(初始化)-------还没有调用open()方法

      1(载入) --------已调用send()方法,正在发送请求

      2(载入完成)-----send()方法完成,已收到全部响应内容

      3(解析)---------正在解析响应内容

      4(完成)---------响应内容解析完成,可以在客户端调用了

    2、status属性:服务器(请求资源)的状态

    3、返回的内容

      responseText:返回以文本形式存放的内容

      responseXML:返回XML形式的内容

五、发送请求(get和post的区别)

  send(要发送的数据):发送请求

 

按照上面所述,一个原生js的ajax的基本结构大概就是这样了

//创建一个ajax对象
var xhr = null;
try{
	xhr = new XMLHttpRequest();
}catch(e){
	xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
					
//发送请求,这里发送请求名为1.txt的文件
xhr.open('get', '1.txt', true);
//提交
xhr.send();
//等待服务器返回内容
xhr.onreadystatechange = function() {
	if(xhr.readyState == 4) {
		alert(xhr.responseText)
	}
}

 但是,我们还需要做一些处理,所以需要封装一个ajax.js

六、数据类型(返回数据的处理)

  1、服务器返回的真正数据

  2、XML/HTML/JSON

    要点:json的写法,

       Eval解析JSON的时候需要注意的地方

       json.parse():字符串解析成对象

七、ajax.js的封装

function ajax(method, url, data, success) {
	var xhr = null;
	try {
		xhr = new XMLHttpRequest();
	} catch (e) {
		xhr = new ActiveXObject('Microsoft.XMLHTTP');
	}
	
	if (method == 'get' && data) {
		url += '?' + data;
	}
	
	xhr.open(method,url,true);
	if (method == 'get') {
		xhr.send();
	} else {
		xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
		xhr.send(data);
	}
	
	xhr.onreadystatechange = function() {
		
		if ( xhr.readyState == 4 ) {
			if ( xhr.status == 200 ) {
				success && success(xhr.responseText);
			} else {
				alert('出错了,Err:' + xhr.status);
			}
		}
		
	}
}

 使用方式,js部分,请求了叫demo3.php的文件,这里主要是用json格式的数据进行传递

ajax('get','demo3.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;
});

 html部分

<ul id="ul1"></ul>

八、另外,目前jsonp的数据格式也是用得很广泛

  jsonp:json with padding
    1、script标签
    2、用script标签加载资源是没有跨域问题的
  
  在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据),函数里面利用这个参数做一些事情 然后需要的时候通过script标签加载1对应远程文件资源,当远程的文件  资源被加载进来的时候,就会去执行我们之前定义好的函数,并且把数据当做这个数据 的参数传入进去

用法如下,这里请求了一个路径,然后返回一个的接收数据的函数,一般叫callbank,但也有可能叫其他,这个命名主要是后台给出命名的。然后自己在随意一个函数来接收返回的数据。这里接收数据的函数叫fn2

<button id="btn2">按钮2</button>
<ul id="ul2"></ul>
	
<script type="text/javascript">
	var btn2 = document.getElementById("btn2");			
	
	btn2.onclick = function(){
		var oScript = document.createElement('script');
		oScript.src = 'getData.php?t=str&callback=fn2';
		document.body.appendChild(oScript);
	}
        function fn2(data){
		var oUl2 = document.getElementById('ul2');
		var html = '';
		for(var i = 0; i < data.length; i++){
			html += '<li>'+ data[i] + '</li>';
		}
		oUl2.innerHTML = html;
	}		
</script>

 然后根据jsonp原理,我做了2个小demo,一个仿百度搜索的页面,查看demo你可以狠狠的点击这里

原理:百度输入框其实是你每输入一个字就发送了一次跨域请求,你可以打开调试工具,查看网路那一栏,当你输入一个字母时,就会发送一个请求,你找到发送的那条请求地址即可

第二个demo就是仿豆瓣的查找书单,这个是很简陋的demo,没有太完善,bug还是有的,重点是看请求回来的数据进行显示,这个demo引入了jquery的分页插件,了解这个分页插件请点击这个地址http://www.lovewebgames.com/jsmodule/paging.html,提交的数据接口为豆瓣的开发者提交接口。代码下载见底部,

 

相关代码下载地址链接:http://pan.baidu.com/s/1eSCDjCA 密码:kyff

代码运行环境,把代码放到本地服务器(XAMPP)里运行,然后在浏览器输入页面地址,若非这个本地服务器运行,可能会出现其他bug

 

 

      

posted @ 2017-04-14 16:24  梁小清  阅读(209)  评论(0编辑  收藏  举报