AJAX学习总结(入门)
介绍读音:[?e??d??ks] AJAX =Asynchronous JavaScript and XML(异步的JavaScript 和 XML)。 AJAX 不是新的编程语言,而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。 学习AJAX需要了解HTML、JS、CSS的知识。 作用场景: 在网页上填写简历,页面中有几十项信息需要填写,填写过程中有若干项填写错误。 没有AJAX: 填写完成后,点击提交,上传所有信息,等待服务器的检查,再通知某一项填写错误。 使用AJAX: 填写过程中,每填写完一项,立刻发送到服务器检查,实时提示某一项是否填写正确。 使用AJAX使用XMLHttpRequest对象实现异步请求、局部刷新,使用方法如下: ·运用HTML和CSS来实现页面,表达信息; ·运用XMLHttpRequest和web服务器进行数据的异步交换; ·运用JavaScript操作DOM,实现动态局部刷新。 创建 XMLHttpRequest 对象var request; if (window.XMLHttpRequest){// code for IE7+,Firefox,Chrome,Opera,Safari request = new XMLHttpRequest(); } else {// code for IE6,IE5 request = new ActiveXObject("Microsoft.XMLHTTP"); } XMLHttpRequest向服务器发送请求request.open("GET","service.asp",true); request.send();
GET:一般用于信息获取。 · 使用URL传递参数。 · 对发送信息的数量也有限制,一般在2000个字符。 POST:一般用于修改服务器上的资源。 · 对所发送信息的数量无限制。 与POST相比,GET更简单也更快,并且在大部分情况下都能用。 然而,在以下情况中,请使用 POST 请求: ·无法使用缓存文件(更新服务器上的文件或数据库) ·向服务器发送大量数据(POST没有数据量限制) ·发送包含未知字符的用户输入时,POST比GET更稳定也更可靠 GET 请求示例一个简单的 GET 请求: request.open("GET",true); request.send(); 在上面的例子中,得到的可能是缓存的结果。为了避免这种情况,可以向URL添加一个唯一的ID: request.open("GET","service.asp?t=" + Math.random(),true); request.send(); 如果需要在GET方法中传递参数,需要在URL中添加信息: request.open("GET","service.asp?fname=Bill&lname=Gates",true); request.send(); POST 请求示例使用POST请求传递参数,一定要记得在open和send方法之间使用setRequestHeader方法设置Content-Type为“application/x-www-form-urlencoded”: request.open("POST",true); request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); request.send("fname=Bill&lname=Gates"); XMLHttpRequest取得服务器的响应当请求被发送到服务器时,客户端需要执行一些基于响应的任务。 当使用async=true时,可通过onreadystatechange事件处理服务器的应答: request.onreadystatechange=function(){ if (request.readyState==4 && request.status==200){ //显示服务器返回的结果 document.getElementById("result").innerHTML=request.responseText; } } 每当readyState改变时,就会触发onreadystatechange事件。 readyState属性存有XMLHttpRequest的状态信息。 下面是XMLHttpRequest对象的三个重要的属性:
在onreadystatechange事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。 当readyState等于4且状态为200时,表示响应已就绪。 示例视频教程:http://www.imooc.com/video/5913 例子简介: ·查询员工信息,可以通过输入员工编号查询员工的基本信息。 ·新建员工信息,包含员工姓名、编号、性别、职位。 源码:ajax示例源码 扩展知识: ·PHP介绍及简单示例。(使用PHP实现服务器端的查询和新建功能) ·XAMMP介绍及启动。(XAMPP包含Apache、MySQL、PHP、PERL,是一个功能强大的建XAMPP软件站集成软件包) ·Dreamweaver中配置web服务器,制作网站,进行本地测试。 ·Fiddler监听HTTP请求。(无需客户端代码既可测试服务器代码)。 扩展一:JSON介绍JSON:JavaScript对象表示法(JavaScript Object Notation)。 JSON是存储和交换文本信息的语法,类似XML。它采用键值对的方式来组织,易于人们阅读和编写,同时也易于机器解析和生成。 JSON是独立于语言的,也就是说不管什么语言,都可以解析JSON,只需要按照JSON的规则来就行。 与XML比较JSON的长度和XML格式比起来很短小。 JSON读写的速度比XML快。 JSON可以使用JavaScript内建的方法直接进行解析,转换成JavaScript对象,非常方便。 与AJAX的关系在AJAX中,使用JSON传递数据已成为事实上的标准,很少使用XML。 语法JSON数据的书写格式是:名称/值对。 例如:”name”:”ZhangSan” 注意:与JavaScript的对象表示法有些区别,就是键值在JS中不需要使用引号,但是在JSON中必须要有引号。 JSON的值可以是下面这些类型: ·数字(整数或浮点数),比如123,1.23 ·字符串(在双引号中) ·逻辑值(true或false) ·数组(在方括号中) ·对象(在花括号中) ·null 例如: { "staff": [ { "name": "user1", "age": 23 }, { "name": "user2", "age": 22 }, { "name": "user3", "age": 21 } ] } 解析JSON在JS中的解析有两种方法:eval和JSON.parse。 var jsondata = ‘{"staff": [{"name": "user1","age": 23},{"name": "user2","age": 22},{"name": "user3","age": 21}]}’; var jsonobj = eval(‘(’ + jsondata + ‘)’); alert(jsonobj.staff[0].name); 在代码中使用eval是很危险的,eval无法捕获json对象中的语法错误!特别是用它执行第三方的JSON数据(其中可能包含恶意代码)时,尽可能使用JSON.parse()方法解析字符串本身,该方法还可以捕捉JSON中的语法错误。 var jsondata = ‘{"staff": [{"name": "user1","age": 21}]}’; var jsonobj = JSON.parse(jsondata); alert(jsonobj.staff[0].name); 校验及格式化JSON在线校验工具:http://jsonlint.com/ 示例视频教程:http://www.imooc.com/video/6159 扩展二:jQuery介绍jQuery是一个轻量级的JavaScript库。 jQuery极大地简化了JavaScript编程。 与AJAX的关系jQuery中封装了AJAX的方法,利用第三方库可以不考虑浏览器,简化操作。 语法基础语法: $(selector).action(); 获取指定ID的对象的值: $(“#id”).val(); 设置指定ID的innerHTML的值: $(“#id”).html(string); 使用AJAX: $.ajax({settings}) ·type:类型,“POST”或“GET”,默认为“GET” ·url:发送请求的地址 ·data:是一个对象,连同请求发送到服务器的数据 ·dataType:预期服务器返回的数据类型。如果不指定,jQuery将自动根据HTTP包MIME信息来只能判断,一般我们采用json格式,可以设置为“json” ·success:是一个方法,请求成功后的回调函数。传入返回后的数据,以及包含成功代码的字符串 ·error:是一个方法,请求失败时调用此函数,传入XMLHttpRequest对象 示例$.ajax({ type:"POST", url:"servicejson.php",
dataType:"json", data:{ name: $("#name").val(), number: $("#number").val(), sex: $("#sex").val(), job: $("#job").val() }, success: function(responseJson){ if (responseJson.success){ $("#createResult").html(responseJson.msg); }else{ $("#createResult").html("出现错误:"+responseJson.msg); } }, error: function(xmlHttpRequest){ alert("error:"+xmlHttpRequest.status); } }); 扩展三:跨域问题的处理介绍域名地址的组成: 当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。 不同域之间相互请求资源,就算做“跨域”。 与AJAX的关系JavaScript出于安全方面的考虑,有同源策略的限制,不允许跨域调用其他页面的对象。 解决方法一:代理通过在同域名的web服务器端创建一个代理。 例如: 北京服务器(域名:www.beijing.com) 上海服务器(域名:www.shanghai.com) 可以在北京的web服务器的后台建立一个上海服务器的代理www.beijing.com/proxy-shanghaiservice.asp来调用上海服务器www.shanghai.com/service.asp的服务,然后再把响应结果返回给前端,这样前端调用北京同域名的服务就和调用上海的服务效果相同了。 解决方法二:JSONPJSONP可以解决主流浏览器的跨域数据访问的问题,只能解决GET方法的跨域访问。 在前端代码中声明jsonp: $.ajax({ type:"GET", url:"http://127.0.0.1:8080/ajaxdemo/servicejsonp.php?number="+$("#idNum").val(), dataType:"jsonp",
jsonp:"callback",
success: function(responseJson){ if (responseJson.success){ $("#searchResult").html(responseJson.msg); }else{ $("#searchResult").html("出现错误:"+responseJson.msg); } }, error: function(xmlHttpRequest){ alert("error:"+xmlHttpRequest.status);} } ); 在后台代码(PHP)中调用: function get(){ $jsonp = $_GET["callback"]; echo $jsonp.'({"success":true,"msg":"Method GET!"})'; } 解决方法三:XMLHttpRequest Level2HTML5提供的XMLHttpRequest Level2(XHR2)实现了跨域访问。 不过IE10以下的版本不支持XHR2这一标准。 使用XHR2只需要在服务器端的代码中添加两行代码允许跨域访问即可: header("Access-Control-Allow-Origin:*"); header("Access-Control-Allow-Methods:POST,GET"); 学习资源AJAX教程:http://www.w3school.com.cn/ajax/index.asp AJAX视频教程:http://www.imooc.com/view/250 JSON教程:http://www.w3school.com.cn/json/index.asp jQuery教程:http://www.w3school.com.cn/jquery/index.asp (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |