ajax

Posted 2020-10-17 小绵羊~~

1、ajax 原理
	
	js提供了一个类 XMLHttpRequest，实例化该对象xhr= new XMLHttpRequest()
	这个时候 可以通过xhr对象发送http请求，并接收返回的信息
	所以 ajax 是xhr对象 执行http请求

2、xhr对象
	
	a.创建xhr对象
		xhr= new XMLHttpRequest();
	
	b.xhr的方法
		xhr.open(‘get/post‘,url,true/false);
		//第一个参数是请求方式,url代表请求地址，第三个参数代表请求是异步还是同步
		
		xhr.send([null])
		//当使用get，或者post，只是请求而不发送数据的时候用null
		//当使用post方式的时候，要发送数据，则这个参数格式是：name=lisi&age=18		

	c.xhr属性 
		
		注：ajax请求返回数据的类型只有两种（text和xml），而text又分为(text，html，json)
		
		readyState // 请求的状态，从0-4变化，当变化到4时结束请求
		responseText //请求后返回的内容
		responseXML //请求xml返回的xml文档格式的内容
		status //响应状态码，200 404 403等
		statusText // 响应状态文字 ok not found forbidden
	
	d.xhr事件
		xhr.onreadystatechange = function(){} 
		//当readyState状态变化时 会被触发
3、xhr发送post查询
	xhr.open(‘post‘,url,true);
	data = ‘name=lisi&age=18‘;

	//注意要设置头信息
	setRequsetHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
	
	xhr.send(data);



4、json串的处理
	
	a.用原生的办法
		eval( ‘(‘ + json + ‘)‘ )//在json串前后加括号 然后转换为可执行的代码
	b.用JSON的parse方法
		JSON.parse(json)

5、xml
	a.书写格式  注意以下是固定格式
		<？xml version=‘1.0‘ encoding=‘utf-8‘ ？>
		<school>
			<grade>
				<class>
					<student>
						<sno>000001</sno>
						<name>张三</name>
						<sex>男</sex>
						<age>18</age>
					</student>
				</class>
			</grade>
		</school>

	b.ajax请求 返回的xml处理
		xml也是对象，也是dom，可以直接进行dom操作来处理
		如：
		var name = return_xml.getElementsByTagName(‘name‘);//张三	

6、ajax跨域 （ajax 默认情况下只能请求同域名下的内容）
	
	a.HTML5 设置头信息来允许跨域访问
		header(‘Access-Controll-Allow-Orign:*‘)//这个可以是*也可以是域名（192.168.2.136，192.168.3.164）
	b.jsonp [严格说不是ajax技术]
		i.通过一个连接的返回值[返回值是一个test(obj)这样的形式]
		ii.然后可以用js来引入这个对应的地址
		iii.最后在js里面写一个方法[如上面的test(obj)]来实现上面的返回

		例子：
		input.oninput = function (){
			var url = ‘http://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word,obdata&word=‘+encodeURI(this.value);
			var sc = document.createElement(‘script‘);
			sc.src = url;
			head.appendChild(sc);
		}
		function suggest_so(obj){
			for(var i=0,str=‘‘;i<obj.result.length;i++){
				str += ‘<li>‘ + obj.result[i].word + ‘</li>‘; 
			}
			ul.innerHTML = str;
			tjian.style.display = ‘block‘;
		}

7、ajax文件上传
	
	//文件上传实现进度条
	xhr.upload.onprogoress = function(ev){
		if(ev.lengthComputable == true){
			var per = 100 * ev.loaded/total;//百分比
		}
	}

8、comet 反向ajax
	
	最简单的模型

	set_time_limit(0);
	ob_start();
	echo str_repeat(‘ ‘, 4000,‘<br>‘);
	ob_flush();
	flush();
	$i=0;
	while (1) {
		echo $i++.‘<br>‘;
		ob_flush();
		flush();
		sleep(1);
	}

	ajax 长轮询（适用于客户端）

	客户请求数据，然后异步查询，
	如果查到了数据那么返回数据并结束本次ajax请求，同时在客户端页面又立即发送刚才的ajax请求
	如果没有查到数据，就一直查询（1秒查询一次sleep），直到有数据