网站建设有钱赚吗,wordpress flat 下载,做网站买了域名之后,苏州论坛建站模板iframe在Ajax流行之前大量使用#xff1a;iframe中的src属性指定的就是一个独立的页面url地址#xff0c;iframe中呈现的就是这个页面的内容。通过改变src的值#xff0c;我们就可以轻松的改变iframe中的内容(类似的#xff0c;刷新验证码也是同样的手段)#xff1a;docum…iframe在Ajax流行之前大量使用iframe中的src属性指定的就是一个独立的页面url地址iframe中呈现的就是这个页面的内容。通过改变src的值我们就可以轻松的改变iframe中的内容(类似的刷新验证码也是同样的手段)document.getElementById(keywords).src /Iframe2.html;演示略独立页面注意iframe加载的是一个独立的页面所以子页面无法直接调用父页面的内容子页面调用父页面需要window.parentwindow.parent.document.getElementsByTagName(p)[0].innerText 全程直播;父页面调用子页面需要window.frames[n]window.frames[0].document.getElementsByTagName(div)[0].setAttribute(style, border: 1px dashed);演示略Ajax技术特点主要特点仍然是一个HTTP请求所以遵守HTTP协议无页面刷新的交互提升了用户体验可以只获取“部分页面”甚至是简单数据降低了流量消耗XMLHttpRequest 对象(现代浏览器)直接new出来就行var xhttp new XMLHttpRequest();接下来都围绕这XMLHttpRequest对象展开。发起请求Ajax需要由客户端主动发起open()可以有5个参数依次为method请求方式 字符串GET或POST (复习)url请求访问的文件路径asynctrue(异步默认)或 false(同步已经不推荐了)user(可选的)用户名称psw(可选的)密码send()GET时不用带参数因为参数都可以在url中直接包含如xhttp.open(GET, /Ajax.html?id8);xhttp.send();(复习有时候需要url参数避免缓存)POST时通常把参数信息放在send()中如//POST时必须设定否则默认类型为text/plain影响后台程序转换xhttp.setRequestHeader(Content-type, application/x-www-form-urlencoded);xhttp.send(fnameBilllnameGates);x-requested-with:xml演示F12查看请求内容号外出于安全原因现代浏览器不允许跨域访问。事件响应理解异步想一想为什么不能直接返回响应结果比如var result xhttp.send();因为send()的结果需要服务器的响应但需要多久服务器才能响应呢在等待服务器响应的这个时间段JavaScript代码就停在这里等着么如果是这样这就叫做“同步”但Ajax是异步的。即一旦完成send()不需要等待send()的结果就会立即执行后面的代码。所以当Ajax的响应到达服务器了怎么办呢用事件来响应onreadystatechange将该事件绑定到XMLHttpRequest即可xhttp.onreadystatechange function() {判断状态readyState保存了 XMLHttpRequest 的状态。0: 请求未初始化open()之前1: 服务器连接已建立open()之后2: 请求已接收3: 正在处理请求4: 请求已完成且响应已就绪xhttp.onreadystatechange function () {console.log(in onreadystatechange: this.readyState);};服务器响应服务器responseTextstatusresponseXMLstatusText为保险起见我们通常都是在获得完整的、正确的Response响应之后if (this.readyState 4 this.status 200) {如果要动态的获得Json数据见ASP.NET RazorPage和 MVC 相关章节。JSON全称JavaScriptObjectNotation作为XML的替代品风靡全球简洁序列化将对象的状态信息转换为可以存储或传输的形式的过程(简单理解内存 I/O)必须是UTF-8包含6种类型number和JavaScript的number完全一致boolean就是JavaScript的true或falsestring就是JavaScript的stringnull就是JavaScript的nullarray就是JavaScript的Array表示方式——[]object就是JavaScript的{ ... }表示方式一个标准的Json序列化示例var laoCheng {name: 老程,age: 21,isFemale: true,hobby: [tabletennis, basketball,swim],course: {C# : 86,HTML/CSS/JavaScript : 95,SQL: 92,ASP.NET: null}}如何进行序列化/反序列化console.log(JSON.stringify(laoCheng));console.log(JSON.stringify(laoCheng, [age])); //指定只序列化age属性console.log(JSON.stringify(laoCheng, null, )); //格式化换行和缩进console.log(JSON.stringify(laoCheng, function (key, value) {if (typeof value string) {//key属性value属性值return value.toUpperCase();}return value;}));最应该小心的其实还是这些玩意(尤其是null和undefined)反序列化var lz JSON.parse({name:老程,age:21,isFemale:true,hobby:[tabletennis,basketball,swim],course:{C#:86,HTML/CSS/JavaScript:95,SQL:92,ASP.NET:null}})观察反序列化除 array 以外不保证各属性的顺序。parse中也可传入 function(key, value) 函数向后台发送JSON数据需要修改content typexhttp.setRequestHeader(Content-type, application/json; charsetutf-8);作业根据Ajax动态加载导航栏下的“新消息”分别通过iframe和Ajax完成侧边栏关键字“换一批”的功能能通过Json获得(有无未读消息的)数据决定是否闪烁铃铛图标(注意要能闪还能不闪)发布求助时能够根据一级关键字通过Ajax获取到该一级关键字下的二级关键字并予以显示定向求助时移出焦点就能找到相关用户刷新帮帮币
