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

来源：互联网发布：音频矩阵处理器编辑：程序博客网时间：2024/06/05 07:33

关于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")        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

结果就正常了。

阅读全文

0 0