zoukankan      html  css  js  c++  java
  • ajax

    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),直到有数据
  • 相关阅读:
    理解“统一编址与独立编址、I/O端口与I/O内存” arm
    JS + CSS 美化 select 下拉框表单
    关于 ecshop common.js 文件 自动随机输出 Powered by ECShop
    Zend Framework 入门随笔 配置与注意事项
    Delphi编程保存数据到Excel文件(4):使用NativeExcel2控件
    ORACLE 最大连接数的问题1
    一生delphi编程经验(转)
    XLSReadWriteII控件来完成10×10的乘法表
    Delphi 动态调整打印机纸张大小
    Linux下Oracle重启和修改连接数3
  • 原文地址:https://www.cnblogs.com/lauhp/p/7999545.html
Copyright © 2011-2022 走看看