[·Òë]High Performance JavaScript(004)
XMLHttpRequest Script Injection XHR½Å±¾×¢Èë
Another approach to nonblocking scripts is to retrieve the JavaScript code using an XMLHttpRequest (XHR) object and then inject the script into the page. This technique involves creating an XHR object, downloading the JavaScript file, then injecting the JavaScript code into the page using a dynamic <script> element. Here's a simple example:
ÁíÒ»¸öÒÔ·Ç×èÈû·½Ê½»ñµÃ½Å±¾µÄ·½·¨ÊÇʹÓÃXMLHttpRequest(XHR)¶ÔÏ󽫽ű¾×¢Èëµ½Ò³ÃæÖС£´Ë¼¼ÊõÊ×ÏÈ´´½¨Ò»¸öXHR¶ÔÏó£¬È»ºóÏÂÔØJavaScriptÎļþ£¬½Ó×ÅÓÃÒ»¸ö¶¯Ì¬<script>ÔªËØ½«JavaScript´úÂë×¢ÈëÒ³Ãæ¡£ÏÂÃæÊÇÒ»¸ö¼òµ¥µÄÀý×Ó£º
var xhr = new XMLHttpRequest();
xhr.open("get", "file1.js", true);
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
var script = document.createElement_x("script");
script.type = "text/javascript";
script.text = xhr.responseText;
document.body.appendChild(script);
}
}
};
xhr.send(null);
This code sends a GET request for the file file1.js. The onreadystatechange event handler checks for a readyState of 4 and then verifies that the HTTP status code is valid (anything in the 200 range means a valid response, and 304 means a cached response). If a valid response has been received, then a new <script> element is created and its text property is assigned to the responseText received from the server. Doing so essentially creates a <script> element with inline code. Once the new <script> element is added to the document, the code is executed and is ready to use.
´Ë´úÂëÏò·þÎñÆ÷·¢ËÍÒ»¸ö»ñÈ¡file1.jsÎļþµÄGETÇëÇó¡£onreadystatechangeʼþ´¦Àíº¯Êý¼ì²éreadyStateÊDz»ÊÇ4£¬È»ºó¼ì²éHTTP״̬ÂëÊDz»ÊÇÓÐЧ£¨2XX±íʾÓÐ
Ïà¹ØÎĵµ£º
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; ......
1. ¶¨ÒåÒ»¸öÓÃÓÚÊä³öJavaScript´úÂë µÄServletÀà¡£
package com.mycompany.response.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServle ......
¿´ÊéµÄʱºòÓöµ½ÕâÑùÒ»¸öÎÊÌ⣬³ÌÐò´úÂëÈçÏÂ
var ob = function(){
var obj = this;
function fn1(){
alert( obj === window );//false
alert( this === window );//ture
}
this.fn2 = function() {
fn1();
}
}
µ±Ê±ºÜ²»Ã÷°×fn1ÀïÃæµÚ¶þ¸öalertµÄ½á¹û£¬Îª ......
ÀàÊÇʲô£¿
Ðí¶à¸Õ½Ó´¥±à³ÌµÄÅóÓѶ¼¿ÉÄÜÀí½â²»ÁËÀ࣬ÆäʵÀàÊǶÔÎÒÃÇÕâ¸öÏÖʵÊÀ½çµÄÄ£Ä⣬°ÑËü˵³É“Àà±ð”»òÕß“ÀàÐÍ”¿ÉÄÜ»á¸üÈÝÒ×Àí½âһЩ¡£±ÈÈç“ÈË”ÕâÖÖ¶¯
Îï¾ÍÊÇÒ»¸öÀ࣬¶ø¾ßÌåijһ¸öÈ˾ÍÊÇ“ÈË”Õâ¸öÀàµÄÒ»¸öʵÀý
£¬
“È ......
Dynamic Script Elements ¶¯Ì¬½Å±¾ÔªËØ
The Document Object Model (DOM) allows you to dynamically create almost any part of an HTML document using JavaScript. At its root, the <script> element isn't any different than any other element on a page: references can be retrie ......