JavaScript DOM编程艺术第七章Ajax学习笔记

最新推荐文章于 2021-01-20 11:13:09 发布

where_slr

最新推荐文章于 2021-01-20 11:13:09 发布

阅读量1k

点赞数 2

分类专栏： Javascript 学习笔记

本文链接：https://blog.csdn.net/where_slr/article/details/74800705

版权

学习笔记同时被 2 个专栏收录

44 篇文章 1 订阅

订阅专栏

Javascript

35 篇文章 0 订阅

订阅专栏

关于Ajax原理

本地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"];

点击前
点击前的