1.浏览器对象
window对象,该对象不但充当全局作用域,而且表示浏览器窗口。window对象有innnerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度。内部宽高指除去菜单栏、工具栏、边框等占位元素后,用于显示网页的净宽高。还有对应的outerWidth和outerHeight用于获取浏览器窗口的整宽高。
navigator对象,常用的navigator属性有,
navigator.appName();浏览器名称
navigator.appVersion();浏览器版本
navigator.language;浏览器设置的语言
navigator.platform;操作系统类型
navigator.userAgent;浏览器设置的User-Agent字符串
screen对象,表示屏幕信息。
location对象,表示当前页面的URL信息。可以用location.href获取,加载一个新的页面,可以用location.assign('\'),重新加载当前页面,location.reload()。
document对象,指当前页面,document对象是整个DOM树的根节点。document的title属性是从HTML页面中读取的,且是可以动态改变的。例:document.title = ''; document对象提供的getElementById()h和getElementByTagName()可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点。document还有一个cookie属性,可获得当前页面的cookie。如果在服务器端设置了httpOnly的cookie将不能被JavaScript读取。为了保证安全,浏览器端应始终设置httpOnly。
history对象,保存浏览器的历史记录,常用的有history.forward()和history.back()。有人会在web设计时,登录成功后history.back()回到登录前界面,这是一种错误的做法,应该重定向。
2.操作表单
HTML的表单输入控件主要有,文本框、口令框、单选框、复选框、下拉框以及隐藏文本。获取值时,如果我们获得了一个input节点的引用,就可以直接调用value获得对应的用户输入值。这种方式可以获得text,password,hidden,select的值,但对于radio和checkbox,应该用checked判断是否‘勾上’了。
3.操作文件
在HTML表单中,可以上传文件的唯一控件就是,需要注意的是,当表单包含时,表单的enctype必须指定为multipart/form-data,method必须为post,浏览器才能以正确的编码,multipart/form-data的格式发送表单数据。
通常在上传文件上时,JavaScript会对文件扩展名做检查,以防止上传无效的文件。
JavaScript的一个重要特性是单线程执行模式,任何时候,JavaScript代码不可能同时有多于一个线程在执行。在JavaScript中,执行多任务实际上都是异步调用,因此,我们不知道何时上面的异步操作完成,因此我们需要设置回调函数,来使JavaScript引擎自动调用该回调函数。
4.AJAX
AJAX——Asynchronous JavaScript and XML,即JavaScript执行异步网络请求。一般当点击一个表单的submit按钮后,浏览器会刷新页面,并在新的网页告诉你成功还是失败了,如果网速太慢或其他,就会得到一个404。
AJAX请求是异步执行的,要通过回调函数获得响应。在现在的浏览器上,写AJAX主要依靠XMLHttpRequest对象。而低版本的IE需要使用ActiveXObject对象。将标准写法与IE写法混在一起:
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject('Microsoft'.XMLHTTP);
}
通过window对象检测浏览器是否支持标准的XMLHttpRequest对象,注意不要根据浏览器的navigator.userAgent来检测浏览器是否支持某个JavaScript的特性,一是该字符串可以伪造,二来通过IE版本判断JavaScript非常复杂。
当创建了XMLHttpRequest对象后,要先设置onreadystatechange的回调函数,在回调函数中,通常我们只需要判断readyState===4判断请求是否完成,如果已经完成,再根据status===200判断是否是一个成功的响应。
XMLHttpRequest的open方法有三个参,get/post方法参,路由参,第三个指定是否使用异步,默认为true。最后调用send方法才真正的发送请求。
JavaScript的AJAX发送请求时遵守浏览器的同源策略,需要url的域名、协议、端口号(有些浏览器可以不同)必须与当前页面的保持一致。
5.CORS
支持HTML5的浏览器的跨域政策,CORS——Crossing-Origin Resource Sharing。该种方式下,跨域能否成功取决于对方服务器是否愿意给你设置一个正确的Access-Control-Allow-Origin的响应头。这种跨域请求称为“简单请求”,简单请求包括GET、HEAD和POST,并且POST的Content-Type有限制,