HTML5 Authoritative Guide Reading notes "Part Five"

1, Ajax simple access to Web content examples:

function Handlebuttonpress (e) {    var HttpRequest = new XMLHttpRequest ();    Httprequest.onreadystatechange = Handleresponse;    Httprequest.open ("GET", E.target.innerhtml + ". html");    Httprequest.open ("GET", E.target.innerhtml + ". html", True (true for async), "username", "password");    Httprequest.send ();} function Handleresponse (e) {    if (e.target.readystate = = Xmlhttpresquest.done && E.target.status = =) {
   document.getelementbyid ("target"). InnerHTML = E.target.responsetext;    }}

Deal with Opera: The ReadyStateChange event does not generate an events object Xmlhttprequest.done similar constants indeed, directly using the state number 42, after open The Httprequest.setrequestheader ("X-http-method-override", "DELETE") Form is actually sending a POST request Httprequest.setrequestheader (" Cache-control "," No-cache ") avoid content cache 3, add" Access-control-allow-origin "across the source access server:" Http://titan "allows the domain name to be accessed across domains

var origin = Req.headers["origin"];if (Origin.indexof ("Titan") >-1) {    Res.setheader (" Access-control-allow-origin ", Origin);} * On behalf of all allowed

4, Httprequest.abort () Abort request 5, E.preventdefault () organization Default response 6, use FormData to pass data var formData = new FormData (form); After using FormData, you do not need to specify the header Content-type will be modified by default to Multipart/form-dataformdata.append (key value pair) 7, send json data var formData = new Object (); formdata[key] = value; Set Header information Httprequest.setrequestheader ("Content-type", "Application/json") httprequest.send ( Json.stringify (FormData)) parse (<json>) into a string (should be said to be an object, parse the good object) 8, upload the progress:

var    Upload = Httprequest.upload;upload.onprogress = function (e) {progress.max = E.total; Progress.value = e.loaded;}    Upload.onload = function (e) {progress.value = 1; Progress.max = 1;} 

9. Type overrides Httprequest.overridemimetype ("text/html") 10, XML type Application/xmlvar xmldoc = httprequest.responsexml;11, Video preload= "None" does not play display blank metadata will get the first frame of the video but the preload property can be masked by the browser use the Poster property to display a bitmap more suitable for some 12, video Nested source added a variety of video source selection, will be in order to match the same for audio13, controls display the default action control 14, Canvas height width middle fill not support information 15, drawing simple example var ctx = document.getElementById ("Canvas"). GetContext ("2d") Ctx.fillrect (10, 10, 50, 50);  Solid Strokerect Hollow Clearrect clears the drawing of the rectangular area Ctx.linewidth = 2 line width linejoin control interchange graphics round bevel (oblique cut) miter (default) Ctx.fillstyle Strokestyle to set the color 16, draw a path step method includes: Beginpath->moveto move to start->arc and LineTo method draw Subpath, call Closepath (optional) Fill or Stroke method 17, LineCap control end style butt, round, square18, Draw arc arcto (X1,y1,x2,y2,rad) depend on two straight lines from the starting point to the x1,y1 from X1,y1 to X2,y2 Shortest arc with a radius of rad
19. Drawing to get mouse movement

var Canvaselem = document.getElementById ("Canvas"), var ctx = Canvaselem.getcontext ("2d"); Canvaselem.onmousemove = Function (e) {    if (E.ctrlkey) {//judgment key        point1 = [E.clientx, e.clienty];//mouse coordinates    }}

20, Ctx.arc (center axis, center ordinate, radius, initial angle MATH.PI/2, end angle, true (true to counterclockwise false to clockwise)) 21, Ctx.beginpath (), Ctx.rect () Ctx.clip () The drawing inside the Rect area can display 22, img.dragged defines the style when dragged 23, geographic information acquisition

Navigator.geolocation.getCurrentPosition (displayposition); function Displayposition (POS) {    pos.coords[" Longitude "]}

24. Web cache Localstorage.setitem (key,value) localstorage.clear () Localstorage.lengthvar key = Localstorage.key (i) var val = Localstorage[key]storagearea will return the changed storage object Sessionstorage session store will be cleared at the end of this session with localstorage similar to 25, Offline Web App offline listing cache manifestexample.html (add HTML itself to the list) Banana100.pngapple100.png often named

HTML5 Authoritative Guide Reading notes "Part Five"