处理XMLHttpRequest对象AJAX跨域请求问题
使用JavaScirpt中的XMLHttpRequest对象可以不刷新页面的情况下更新网页,实现页面与后端服务器的数据交互。但大多数浏览器都实施了同源安全策略,要求被请求的 URL 与包含XMLHttpRequest脚本的页面具有相同的主机名和端口。浏览器的这一特性,给AJAX请求的安全带来了一定的保障,但对于需要跨域请求的项目和站点也带来了一定的困扰。
阅读全文使用JavaScirpt中的XMLHttpRequest对象可以不刷新页面的情况下更新网页,实现页面与后端服务器的数据交互。但大多数浏览器都实施了同源安全策略,要求被请求的 URL 与包含XMLHttpRequest脚本的页面具有相同的主机名和端口。浏览器的这一特性,给AJAX请求的安全带来了一定的保障,但对于需要跨域请求的项目和站点也带来了一定的困扰。
阅读全文事件处理程序又叫做事件监听器,addEventListener()
和removeEventListener()
是“DOM2级事件”中定义的两个方法,分别用于添加和删除事件处理程序。所有的DOM节点中都包含这两个方法,并且它们都接受3个参数:要处理的事件名、要为事件添加的处理程序的函数和一个表示事件处理阶段的布尔值。详见下文……
要使用XMLHttpRequest对象POST请求不在同一域名下的一个站点,即:跨域请求,请求数据格式为JSON。因此需要使用setRequestHeader()
方法设置Content-Type
为'application/json
。设置完这个自定义的HTTP Headers
后,发现原本可以跨域POST
请求失效了。调试对应的服务端代码,发现POST
请求变成了OPTIONS
请求。这与CORS(Cross-Origin Resource Sharing,跨站资源共享)
策略有关,设置Content-Type
后,CORS
简单请求
变为Preflighted 请求
。在Preflighted 请求
中,XMLHttpRequest对象会首先发送OPTIONS
嗅探,以验证是否有对指定站点的访问权限。
在一个Web页面中,需要弹出一个提示信息显示给用户。基于这个需求,要使用document.createElement()创建一个DOM节点。创建完节点后,还要使用appendChild()
或 insertBefore()
将创建的节点插入到DOM的指定位置。
浏览器端的JavaScript采用的是事件驱动的异步编程模型。在这种设置模式下,当文档、浏览器、元素或与之相关的对象发生某些事情时,浏览器就会产生对应的事件(event)。事件是JavaScript和HTML DOM交互的基础,DOM元素支持的每种事件,都可以使用一个与相应事件处理程序(事件监听)通过相应HTML属性来指定。添加DOM元素事件处理程序,可以使用DOM0级的方式添加,也可以使用DOM2级的方式添加。
阅读全文在浏览器端JavaScript事件驱动的异步编程模式下,如果JavaScript关注特定类型的事件,那么就可以为事件注册事件处理程序。在DOM文档中,当事件发生时会逐级向上传递,并最终传递给文档树。如果DOM元素注册过事件处理程序,当事件传递到对应位置就会被事件处理程序(注册的函数)所处理。这种事件传播机制叫做事件“冒泡”。
阅读全文浏览器端的JavaScript运行时对HTML页面的操作,其本质是在操作一个或多个文档。程序启动后,文档会被抽象为Document
对象,通过全局变量document
可以获取对这个对象的引用。为了操作文档中的元素(Element
对象),需要通过document
获取这些元素。在W3C
的DOM
规范中定义了选取元素的方法。