JavaScript
Ajax
创建 XMLHttpRequest 对象
XMLHttpRequest 是 AJAX 的基础 所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。 XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
var xmlhttp;
if ( window. XMLHttpRequest) {
xmlhttp= new XMLHttpRequest ( ) ;
} else {
xmlhttp= new ActiveXObject ( "Microsoft.XMLHTTP" ) ;
}
向服务器发送请求请求
如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
xmlhttp. open ( "GET" , "ajax_info.txt" , true ) ;
xmlhttp. send ( ) ;
方法 描述 open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。 method:请求的类型;GET 或 POST url:文件在服务器上的位置 async:true(异步) 或 false(同步) send(string) 将请求发送到服务器。 string:仅用于 POST 请求
与 POST 相比,GET更简单也更快,并且在大部分情况下都能用。 然而在下列情况中,使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库) 向服务器发送大量数据(POST 没有数据量限制) 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
GET 请求
xmlhttp. open ( "GET" , "/try/ajax/demo_get.php" , true ) ;
xmlhttp. send ( ) ;
在上面的例子中,可能得到的是缓存的结果。为了避免这种情况,向 URL 添加一个唯一的 ID:
xmlhttp. open ( "GET" , "/try/ajax/demo_get.php?t=" + Math. random ( ) , true ) ;
xmlhttp. send ( ) ;
通过 GET 方法发送信息,向 URL 添加信息:
xmlhttp. open ( "GET" , "/try/ajax/demo_get2.php?fname=Henry&lname=Ford" , true ) ;
xmlhttp. send ( ) ;
POST 请求
xmlhttp. open ( "POST" , "/try/ajax/demo_post.php" , true ) ;
xmlhttp. send ( ) ;
如果需要像 HTML 表单那样 POST 数据,要使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定要发送的数据:
xmlhttp. open ( "POST" , "/try/ajax/demo_post2.php" , true ) ;
xmlhttp. setRequestHeader ( "Content-type" , "application/x-www-form-urlencoded" ) ;
xmlhttp. send ( "fname=Henry&lname=Ford" ) ;
方法 描述 setRequestHeader(header,value) 向请求添加 HTTP 头 header:规定头的名称 value:规定头的值
url - 服务器上的文件
open() 方法的 url 参数是服务器上文件的地址:
xmlhttp. open ( "GET" , "ajax_test.html" , true ) ;
该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)。
异步 - True 或 False
AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。 XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:
xmlhttp. open ( "GET" , "ajax_test.html" , true ) ;
Async=true
当使用 async=true 时,需规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:
xmlhttp. onreadystatechange = function ( ) {
if ( xmlhttp. readyState== 4 && xmlhttp. status== 200 )
{
document. getElementById ( "myDiv" ) . innerHTML= xmlhttp. responseText;
}
} ;
xmlhttp. open ( "GET" , "/try/ajax/ajax_info.txt" , true ) ;
xmlhttp. send ( ) ;
Async = false
如需使用 async=false,需将 open() 方法中的第三个参数改为 false:
xmlhttp. open ( & quot; GET & quot; , & quot; test1. txt& quot; , false ) ;
当使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可:
xmlhttp. open ( "GET" , "/try/ajax/ajax_info.txt" , false ) ;
xmlhttp. send ( ) ;
document. getElementById ( "myDiv" ) . innerHTML= xmlhttp. responseText;
AJAX - 服务器 响应
如需获得来自服务器的响应,需要使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性 描述 responseText 获得字符串形式的响应数据 responseXML 获得 XML 形式的响应数据
responseText 属性
responseText 属性返回字符串形式的响应,因此可以这样使用:
xmlhttp. onreadystatechange = function ( ) {
if ( xmlhttp. readyState== 4 && xmlhttp. status== 200 )
{
document. getElementById ( "myDiv" ) . innerHTML= xmlhttp. responseText;
}
}
xmlhttp. open ( "GET" , "/try/ajax/ajax_info.txt" , true ) ;
xmlhttp. send ( ) ;
responseXML 属性
如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,因此使用 responseXML 属性:
xmlhttp. onreadystatechange = function ( ) {
if ( xmlhttp. readyState== 4 && xmlhttp. status== 200 ) {
xmlDoc= xmlhttp. responseXML;
txt= "" ;
x= xmlDoc. getElementsByTagName ( "ARTIST" ) ;
for ( i= 0 ; i< x. length; i++ ) {
txt= txt + x[ i] . childNodes[ 0 ] . nodeValue + "<br>" ;
}
document. getElementById ( "myDiv" ) . innerHTML= txt;
}
}
xmlhttp. open ( "GET" , "test.xml" , true ) ;
xmlhttp. send ( ) ;
AJAX - onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。 每当 readyState 改变时,就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息。 下面是 XMLHttpRequest 对象的三个重要的属性:
属性 描述 onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪 status 200: “OK” 404: 未找到页面
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。 当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
xmlhttp. onreadystatechange = function ( ) {
if ( xmlhttp. readyState== 4 && xmlhttp. status== 200 )
{
document. getElementById ( "myDiv" ) . innerHTML= xmlhttp. responseText;
}
}
xmlhttp. open ( "GET" , "/try/ajax/ajax_info.txt" , true ) ;
xmlhttp. send ( ) ;
onreadystatechange 事件被触发 5 次(0 - 4),对应着 readyState 的每个变化。
使用回调函数
如果网站上存在多个 AJAX 任务,那么应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。 该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):
function myFunction ( ) {
loadXMLDoc ( "/try/ajax/ajax_info.txt" , function ( ) {
if ( xmlhttp. readyState== 4 && xmlhttp. status== 200 ) {
document. getElementById ( "myDiv" ) . innerHTML= xmlhttp. responseText;
}
} ) ;
}
服务器常用状态码
100——客户必须继续发出请求 101——客户要求服务器根据请求转换HTTP协议版本 200——交易成功 201——提示知道新文件的URL 202——接受和处理、但处理未完成 203——返回信息不确定或不完整 204——请求收到,但返回信息为空 205——服务器完成了请求,用户代理必须复位当前已经浏览过的文件 206——服务器已经完成了部分用户的GET请求 300——请求的资源可在多处得到 301——删除请求数据 302——在其他地址发现了请求数据 303——建议客户访问其他URL或访问方式 304——客户端已经执行了GET,但文件未变化 305——请求的资源必须从服务器指定的地址得到 306——前一版本HTTP中使用的代码,现行版本中不再使用 307——申明请求的资源临时性删除 400——错误请求,如语法错误 401——请求授权失败 402——保留有效ChargeTo头响应 403——请求不允许 404——没有发现文件、查询或URl 405——用户在Request-Line字段定义的方法不允许 406——根据用户发送的Accept拖,请求资源不可访问 407——类似401,用户必须首先在代理服务器上得到授权 408——客户端没有在用户指定的时间内完成请求 409——对当前资源状态,请求不能完成 410——服务器上不再有此资源且无进一步的参考地址 411——服务器拒绝用户定义的Content-Length属性请求 412——一个或多个请求头字段在当前请求中错误 413——请求的资源大于服务器允许的大小 414——请求的资源URL长于服务器允许的长度 415——请求资源不支持请求项目格式 416——请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含If-Range请求头字段 417——服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求 500——服务器产生内部错误 501——服务器不支持请求的函数 502——服务器暂时不可用,有时是为了防止发生系统过载 503——服务器过载或暂停维修 504——关口过载,服务器使用另一个关口或服务来响应用户,等待时间设定值较长 505——服务器不支持或拒绝支请求头中指定的HTTP版本
面向对象
面向对象是一种通用思想:不了解原理的情况下,会使用功能
面向对象编程(OOP)的特点
封装:不考虑内部实现,只考虑功能使用 继承:从已有对象上,继承出新的对象:多重继承、多态
对象的组成
方法——函数:过程、动态的 属性——变量:状态、静态的
构造函数
正常情况下,全局函数中的 this 是指向 window
function CreatePerson ( name, age) {
this . name = name;
this . age = age;
this . say = function ( ) {
aletr ( "My name is :" + this . name + "," + "I'm" + this . age + "years old" ) ;
} ;
}
var person1 = new CreatePerson ( 'rain' , 18 ) ;
var person2 = new CreatePerson ( 'test' , 20 ) ;
当调用函数前加上“new”,浏览器会自动的创建一个空对象,同时将 this 指向它,并在函数结束时返回这个对象
原型(prototype)
上述程序中创建的两个 person 都具有相似的方法 say 但是这两个方法是相互独立的,占据着不同的内存空间,造成资源浪费
alert ( person1. say == person2. say) ;
CreatePerson. prototype. say = function ( ) {
aletr ( "My name is :" + this . name + "," + "I'm" + this . age + "years old" ) ;
} ;
alert ( person1. say == person2. say) ;
JSON方式(适用于单个对象)
var json = {
name: 'Rain' ,
age: 18 ,
say: function ( ) {
aletr ( "My name is :" + this . name + "," + "I'm" + this . age + "years old" ) ;
}
}
call()
call() 第一个参数会成为所调用函数的 this ,后面的才是实际的传参
function show ( ) {
aletr ( this ) ;
}
show. call ( 10 ) ;
引用
var arr1 = [ 1 , 2 , 3 ] ;
var arr2 = arr1;
arr2. push ( 4 ) ;
alert ( arr1) ;
alert ( arr2) ;
当 arr2 = arr1 时,实际上是将 arr2 也指向 arr1 所指向的空间 在 arr2 push 的时候 实际上是将 4 添加进它们所指向的公共空间,因此 arr1 的返回值也会发生改变
继承
function A ( ) {
this . a = 12 ;
}
A . prototype. show = function ( ) {
alert ( this . a) ;
}
function B ( ) {
A . call ( this ) ;
}
B . prototype = A . prototype;
B . prototype. fn = function ( ) {
alert ( 'abc' ) ;
}
var objA = nwe A ( )
var objB = new B ( ) ;
objB. fn ( ) ;
objA. fu ( ) ;
cookie
设置 cookie
document. cookie = 'user = rain' ;
document. cookie = 'pwd = 12345' ;
过期时间(expires)
var oDate = new Date ( ) ;
oDate. setDate ( oDate. getDate ( ) + 14 ) ;
document. cookie = "user = rain;expires=" + oDate;
封装 cookie
function setCookie ( name, value, day) {
var oDate = new Date ( ) ;
oDate. setDate ( oDate. getDate ( ) + day) ;
document. cookie = name + '=' + value + ';expires=' + oDate;
}
setCookie ( 'user' , 'rain' , 14 ) ;
读取 cookie
function getCookie ( name) {
var arr = document. cookie. split ( '; ' ) ;
for ( let i= 0 ; i< arr. length; i++ ) {
var arr2 = arr[ i] . split ( '=' ) ;
if ( arr2[ 0 ] == name) {
return arr2[ 1 ] ;
}
}
return '' ;
}
删除 cookie
function removeCookie ( name) {
setCookie ( name, 1 , - 1 )
}
正则表达式
基本方法
方法 功能 search(’’) 查找指定字符,并返回它在整个字符串中的位置;如果没找到就返回 -1 substring(m,n) 用于截取字符串,返回以 m: 起点,n: 终点的字符串(不包括终点字符) charAt(n) 返回第 n 位的字符 split(’’) 分割字符串,返回数组