JavaScript DOMプレミアムプログラム設計7.アプリケーションにAjaxを追加します.最後まで頑張ります.
31307 ワード
時には、理解力のせいかもしれません.上調子なので、物事を見てもいつも心に入らないです.しかも、いつも本節をスキップしたいです.あるいは、このような悪循環によって、私はすぐに本当の勉強ができなくなります.また、私の学習自信に打撃を与えられます.また、多くの事件を浪費しました.できることは、自分の学習のペースを緩めて、脳に十分な時間を与えて理解することです.
一週間も経って、この本を読んでいます.前は大丈夫です.後はうとうとしています.特に7章の後は、自分で勝手に見ても、最初のように少しずつ叩きたくないです.後のいくつかのケースは、初心者がコードに向かって、電子書籍を全部読みました.菜々鳥が書いたこれらのブログは、他人に何かを学ばせたいのではなく、自分に本を読んでもらいたいのです.あまりはっきりしないですが、少なくともこの道を歩いたことがあります.嬉しいです.これらのケースに対して、私は後で大丈夫です.またノックしに来ます.勉強の道はまだ長いです.菜々鳥なら頑張ります.
異なるブラウザの間に、XMLttpRequest方法が含まれています. open(method,URL[,asynchronous]]):要求のURL、方法、および要求に関する他のオプション属性を指定するために使用されます. set Request Headerは、与えられたlabelおよびvalueを要求してヘッダ情報を適用するために使用される.この方法は、open()の後で、send()の前に呼び出さなければならない. sendは、要求を送信するために使用される. abort()は、現在の要求を停止するために使用される . get AllResonseHeaders()は、文字列形式の完全なヘッダ情報セットを返す. get ResponseHeaderは、文字列形式の完全なヘッダ情報セットを返す. は、新しい要求 を生成する.処理応答 XMLHttpRequestオブジェクトの属性 readyState:0--まだ初期化されていません.1--ロード中;2--ロード完了;3--インタラクティブ;4--完成 レスポンスTextは、対応するデータの文字列表現 である.レスポンスXMLは、DOMコアに対応したドキュメントオブジェクトであり、 statusは、要求状態を表すデジタルコードである. status Textは状態コードに関する情報である. onreadystatechangeは、要求の異なるreadyState状態で呼び出される方法を含むべきである.以下は一つの典型的なonreadystatch方法です. 、Ajax要求 をサーバ上で識別する.
この部分はよく分かりませんでした. XML Ajaxハイブリッド技術の最後の部分はXML対応であり、一つのデータ転送メカニズムとして、XMLは開発者がDOMレベルからの遍歴、読み取り、操作を可能にすることにおいて、相応のデータアクセスが評価され、また、処理過程においてSXLT解析システムを統合すれば、サーバとクライアントは、XSLTファイルを共有して、サーバとブラウザで同じタグを生成できるようにすることができる.
純粋なテキスト:
＜p class=「success」＞The reponse was success ful(/p)
これにより、要素属性によってメタデータを追加する能力が備わる.また、inners HTML属性を使用して、レスポンスTextのコードをドキュメントに挿入することもできます.再利用可能なオブジェクト XMLHttpRequestの対象を処理するために、ライブラリに二つの方法を追加しました.
一週間も経って、この本を読んでいます.前は大丈夫です.後はうとうとしています.特に7章の後は、自分で勝手に見ても、最初のように少しずつ叩きたくないです.後のいくつかのケースは、初心者がコードに向かって、電子書籍を全部読みました.菜々鳥が書いたこれらのブログは、他人に何かを学ばせたいのではなく、自分に本を読んでもらいたいのです.あまりはっきりしないですが、少なくともこの道を歩いたことがあります.嬉しいです.これらのケースに対して、私は後で大丈夫です.またノックしに来ます.勉強の道はまだ長いです.菜々鳥なら頑張ります.
異なるブラウザの間に、XMLttpRequest方法が含まれています.
function stateChangeListener()
{
//
}
var request = false;
if (window.XMLHttpRequest)
{
var request=new window.XMLHttpRequrst();
}
else if (window.ActiveXObject)
{
var request=new window.ActiveXObject('Microsoft.XMLHTTP');
}
if (request)
{
request.onreadystatechange=stateChangeLinstener;
request.open('GET','/your/script/?var=value&var2=value',true);
request.send(null);
/* post */
//request.open('POST','/your/script',true);
//request.send('var=value&var2=value');
/* js ， file
， POST */
}function stateChangeListener()
{
switch (request.readyState)
{
case 1:
//
break;
case 2:
//
break;
case 3:
//
break;
case 4:
//
if (request.status==200)
{
// request.responseText request.responseXML
}
else
{
//request.status request.statusText
}
break;
}
}//
// 。
function alertAndDoWhatever()
{
//r onreadystatechange
alert(r.responseText);
}
request.onreadystatechange=function()
{
//
if (request.readyState==4&&request.status=='200')
{
// ，
alertAndDoWhatever(request);
}
}
//
request.open('GET','/youserscript/?var=value',true);
//
request.send(null);この部分はよく分かりませんでした.
var xsltProcessor=new XSLTProcessor();
var xslStylesheet;
var xmlDoc;
// XSL
var requestXsl= new XMLHttpRequest();
requestXsl.onreadystatechange=function(request)
{
xslStylesheet=request.responseXML;
}
requestXsl.open('GET',"example.xsl",true);
requestXml.send(null);
var processor=function()
{
if (xslStylesheet&&smlDoc)
{
clearInterval(this);
// XSLT XML
xsltProcessor.importStylesheet(xslStylesheet);
var fragment=xsltProcessor.transformToFragment(xmlDoc,document);
ADS.S('example').appendChild(fragment);
}
}
// 200
setInterval(processor,200);
// XML XML DOM2
var messages=request.responseXML.getElementsByTagName('message');
for (var i = 0;i<messages.length ;i++ )
{
ADS.$('example').appendChild(messages[i]);
}純粋なテキスト:
request.onreadystatechange=function()
{
if (this.readyState==4&&request.status==200)
{
if (request.respenseText=='t')
{
//
}
else
{
//
}
}
}＜p class=「success」＞The reponse was success ful(/p)
これにより、要素属性によってメタデータを追加する能力が備わる.また、inners HTML属性を使用して、レスポンスTextのコードをドキュメントに挿入することもできます.
request.onreadystatechange=function()
{
if (request.readyState==4&&request.status==200)
{
ADS.$('example').innerHTML=request.reponseText;
}
}request.onreadystatechange=function()
{
if (request.readyState==4&&request.status==200)
{
eval(request.responseText);
}
}{
message:'The response was successful',
type: 'success'
}request.onreadystatechange=function()
{
if (this.readyState==4&&request.status==200)
{
// JSON response
var response=eval('('+this.responseText+')');
// innerHTML response
ADS.$('example').innerHTML='<p class="' +response.type
+'">'
+reponse.message
+</p>;
//
alert(response.message);
// DOM
var p = document.createElement('p');
p.appendChild(document.createTextNode(response.message));
ADS.$('example').appendChild('p');
}
}/*
parseJSON(string,filter)
A slightly modified version of the public domain method
at http://www.json.org/json.js This method parses a JSON text
to produce an object or array. It can throw a
SyntaxError exception.
The optional filter parameter is a function which can filter and
transform the results. It receives each of the keys and values, and
its return value is used instead of the original value. If it
returns what it received, then structure is not modified. If it
returns undefined then the member is deleted.
Example:
// Parse the text. If a key contains the string 'date' then
// convert the value to a date.
myData = parseJSON(string,function (key, value) {
return key.indexOf('date') >= 0 ? new Date(value) : value;
});
*/
function parseJSON(s,filter) {
var j;
function walk(k, v) {
var i;
if (v && typeof v === 'object') {
for (i in v) {
if (v.hasOwnProperty(i)) {
v[i] = walk(i, v[i]);
}
}
}
return filter(k, v);
}
// Parsing happens in three stages. In the first stage, we run the
// text against a regular expression which looks for non-JSON
// characters. We are especially concerned with '()' and 'new'
// because they can cause invocation, and '=' because it can cause
// mutation. But just to be safe, we will reject all unexpected
// characters.
/* ：
1， JSON ， JSON 。 “0” “new”，
， “=” ，
*/
if (/^("(\\.|[^"\\
\r])*?"|[,:{}\[\]0-9.\-+Eaeflnr-u
\r\t])+?$/.
test(s)) {
// In the second stage we use the eval function to compile the text
// into a JavaScript structure. The '{' operator is subject to a
// syntactic ambiguity in JavaScript: it can begin a block or an
// object literal. We wrap the text in parens to eliminate
// the ambiguity.
/*
*/
try {
j = eval('(' + s + ')');
} catch (e) {
throw new SyntaxError("parseJSON");
}
} else {
throw new SyntaxError("parseJSON");
}
// In the optional third stage, we recursively walk the new structure,
// passing each name/value pair to a filter function for possible
// transformation.
if (typeof filter === 'function') {
j = walk('', j);
}
return j;
};
/**
* Setup the various parts of an XMLHttpRequest Object
*/
function getRequestObject(url,options) {
// Initialize the request object
var req = false;
if(window.XMLHttpRequest) {
var req = new window.XMLHttpRequest();
} else if (window.ActiveXObject) {
var req = new window.ActiveXObject('Microsoft.XMLHTTP');
}
if(!req) return false;
// Define the default options
options = options || {};
options.method = options.method || 'GET';
options.send = options.send || null;
// Define the various listeners for each state of the request
req.onreadystatechange = function() {
switch (req.readyState) {
case 1:
// Loading
if(options.loadListener) {
options.loadListener.apply(req,arguments);
}
break;
case 2:
// Loaded
if(options.loadedListener) {
options.loadedListener.apply(req,arguments);
}
break;
case 3:
// Interactive
if(options.ineractiveListener) {
options.ineractiveListener.apply(req,arguments);
}
break;
case 4:
// Complete
// if aborted FF throws errors
try {
if (req.status && req.status == 200) {
// Specific listeners for content-type
// The Content-Type header can include the charset:
// Content-Type: text/html; charset=ISO-8859-4
// So we'll use a match to extract the part we need.
var contentType = req.getResponseHeader('Content-Type');
var mimeType = contentType.match(/\s*([^;]+)\s*(;|$)/i)[1];
switch(mimeType) {
case 'text/javascript':
case 'application/javascript':
// The response is JavaScript so use the
// req.responseText as the argument to the callback
if(options.jsResponseListener) {
options.jsResponseListener.call(
req,
req.responseText
);
}
break;
case 'application/json':
// The response is json so parse
// req.responseText using the an anonymous functions
// which simply returns the JSON object for the
// argument to the callback
if(options.jsonResponseListener) {
try {
var json = parseJSON(
req.responseText
);
} catch(e) {
var json = false;
}
options.jsonResponseListener.call(
req,
json
);
}
break;
case 'text/xml':
case 'application/xml':
case 'application/xhtml+xml':
// The response is XML so use the
// req.responseXML as the argument to the callback
// This will be a Document object
if(options.xmlResponseListener) {
options.xmlResponseListener.call(
req,
req.responseXML
);
}
break;
case 'text/html':
// The response is HTML so use the
// req.responseText as the argument to the callback
if(options.htmlResponseListener) {
options.htmlResponseListener.call(
req,
req.responseText
);
}
break;
}
// A complete listener
if(options.completeListener) {
options.completeListener.apply(req,arguments);
}
} else {
// Response completed but there was an error
if(options.errorListener) {
options.errorListener.apply(req,arguments);
}
}
} catch(e) {
//ignore errors
//alert('Response Error: ' + e);
}
break;
}
};
// Open the request
req.open(options.method, url, true);
// Add a special header to identify the requests
req.setRequestHeader('X-ADS-Ajax-Request','AjaxRequest');
return req;
}
window['ADS']['getRequestObject'] = getRequestObject;