JavaScript DOM编程艺术第七章Ajax学习笔记关于Ajax原理本地file浏览不要用webkit核心浏览器

本地file浏览不要用webkit核心浏览器，要用firefox。否则就要搭建服务器后通过http访问。

今天学习了Ajax从本地文件获取文本。遇到了些问题，在网络上都找到了解决办法。

先把源码都贴上来吧。

HTML代码

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Ajax</title>  
        <script src="js/getHTTPObject.js"></script>  
		 <script src="js/getNewContent.js"></script>  
    </head>  
    <body>  
        <input type="button" value="读取" onclick="getNewContent('example.txt');"/>
        <p><div id="data" class="divStyle"></div></p>  
    </body>  
    </html>

getHTTPObject.js代码 getHTTPObject通过对象检测技术检测了XMLHttpRequest.如果失败，则继续检测其他方法，最终返回false或者一个新的XMLHttpReuqest对象

function getHTTPObject(){
		if(typeof XMLHttpRequest == "undefined") return false;
		XMLhttpRequest = function(){
			try{
				return new ActiveXObject("Msml2.XMLHTTP.6.0");
			}catch(e){}
			try{
				return new ActiveXObject("Msml2.XMLHTTP.3.0");
			}catch(e){}
			try{
				return new ActiveXObject("Msml2.XMLHTTP");
			}catch(e){}
			return false;
		}	
		return new XMLHttpRequest();
	}

getNewContent.js代码如下

function getNewContent(url){
	var request = getHTTPObject();//创建request对象
	if(request){
		request.open("GET",url,true);//get类型、url、是否异步

		request.onreadystatechange = function(){//服务器返回响应时触发
			/*
				function要在onreadystatechange被触发时执行，而不是立即执行，所以不要加（）
				request.onreadystatechange = doSomething;
			*/
			if(request.readyState == 4){//返回的类型
				/*
					readystate == 0 :未初始化
					readystate == 1 :正在加载
					readystate == 2 :加载成功
					readystate == 3 :正在交互
					readystate == 4 :完成
				*/
				 if(request.status == 200){ //判断是否一切准备就绪
				var para = document.createElement("p");
				var txt = document.createTextNode(request.responseText);
				para.appendChild(txt);
				document.getElementById("data").appendChild(para);		
				//document.getElementById("data").innerHTML = request.responseText;  	
			}
		   }
		};
		request.send();//发送请求GET请求
		//request.send(需要传的数据);发送请求POST请求
	}else{
		alert("Sorry,your browser dosen\'t support XMLHttpRequest !!!");
	}
}

GET和POST区别： GET传输数据较小，并且是附加在URL上传输，会被缓存在浏览器，安全性不高；

var url="__MODULE__/Ucenter/ajax_update"//设置要提交action到后台的那个处理请求的文件名
    url=url+"?userName="+userName+"&passWord="+passWord//为这个路径加上参数用户名和密码
    url=url+"&sid="+Math.random()//为这个路径加上一个随机数
    xmlHttp.open("GET",url,true)//定义请求的参数
！！！对于get请求（或凡涉及到url传递参数的），被传递的参数都要先经encodeURIComponent方法处理.例：var url = "update.php?username=" +encodeURIComponent(username) + "&content=" +encodeURIComponent(content)+"&id=1" ;

POST传输是把数据以一个实体传输，数据量比GET大

1.设置header的Context-Type为application/x-www-form-urlencode确保服务器知道实体中有参数变量.通常使用XmlHttpRequest对象的SetRequestHeader("Context-Type","application/x-www-form-urlencoded;")。例：xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
2.参数是名/值一一对应的键值对,每对值用&号隔开.如 var name=abc&sex=man&age=18，注意var name=update.php?abc&sex=man&age=18以及var name=?abc&sex=man&age=18的写法都是错误的;
3.参数在Send(参数)方法中发送,例： xmlHttp.send(name); 如果是get方式，直接 xmlHttp.send(null);4.服务器端请求参数区分Get与Post。如果是get方式则$username = $_GET["username"]; 如果是post方式，则$username = $_POST["username"];

点击前 点击前的

点击后

遇到的问题：搜狗、chrome、ie均不能读取。在网上找到一篇分享，说是chrome不支持本地的异步请求。网上解决不支持本地异步请求

如何在chrome上面也能得到相同的执行，所以需要在Chrome的快捷方式后面添加：--allow-file-access-from-files 即可（注意前面需要额外加一个空格，否则会报错。）

如我在本机上的命名是："C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

结果就正常了。