شروع کار با Ajax - آموزشگاه ویستا
شروع کار با Ajax

شروع کار با Ajax

نیروی پیشبرنده پشت سر Ajax، ایجاد ارتباط بین کلاینت و سرور است. قبلا این ارتباط محدود به توسعه زبانهای سمت سرور مانند perl و CGI بود، تکنولوژیهای جدید مانند PHP ،asp.net و jsp تکنیک های را برای آمیختن برنامه های سمت سرور و کلاینت برای علاقمندان به ایجاد برنامه های وب فراهم آوردند، اما آن ها فاقد تکنیک های سمت کلاینت مانند جاوااسکریپت بودند. اما اکنون آونگ در جهت دیگری تاب می خورد، توسعه دهندگان سمت سرور نیاز به فهمیدن چیزهای زیادی درباره تکنیک های سمت کلاینت دارند

تا بتوانند راه حل Ajax را به کار ببرند. شروع با HTTP

بهترین روش درک Ajax درک HTTP است، HTTP پروتکلی برای ارسال صفحات وب، تصویر و انواع دیگر فایل ها بر روی اینترنت به سمت مرورگر شما و یا برعکس )سمت سرور( است. زمانی که شما یک URL را در مرورگر تایپ می کنید، یک //:HTTP به آدرس شما اضافه می شود که نشان می دهد شما می خواهید از HTTP برای دسترسی به اطلاعات محل ذکر شده استفاده کنید. )اغلب مرورگرها تعداد دیگری از پروتکل ها

مانند FTP را نیز پشتیبانی می کنند(

HTTP از دوقسمت تشکیل شده است: درخواست)request( و پاسخ )Response(. زمانی که شما در

مرورگر وب یک URL را تایپ می کنید، مرورگر از طرف شما یک درخواست ایجاد کرده و آن را ارسال می

کند این درخواست شامل Url ی که شما تایپ کرده اید و برخی اطلاعات دیگر که به مرورگر مربوط می

شود است. سرور این درخواست را دریافت و به سمت عقب )سمت مرورگر( پاسخی را ارسال می کند. پاسخ

شامل اطلاعاتی درباره محل تعیین شده داده در URL است. این وظیفه مرورگر است که پاسخ را تغییر داده و آن

را در صفحه وب نمایش دهد.

درخواست های HTTP فرمت یک درخواست HTTP به صورت زیر است:

در یک درخواست HTTP، خط اول بایستی یک خط درخواست باشد تا نوع درخواست، منابع در دسترس، و نسخه HTTP که مورد استفاده قرار می گیرد را نشان دهد. خط بعد، یک قطعه header است که اطلاعات اضافی که توسط سرور مورد استفاده قرار می گیرد را نشان می دهد. بعد از Header یک خط خالی وجود

داردکه می تواند با اطلاعات اضافی پر شود.

<request-line>

<headers>

<blank line>

[<request-body>]

انواع مختلفی از درخواست وجود دارد که در HTTP تعریف می شود اما دو نوع مورد توجه توسعه دهندگان Ajax درخواست های نوع: GET و POST می باشند. هر زمانی که شما یک URL را در مرورگر وب تایپ کنید، برای آن URL، یک درخواست GET به سمت سرور ارسال می کنید، که بطور کلی به سرور می گوید که منابع را بگیرد و آن را به سمت عقب ارسال کند. اینجا یک مثال از چیزی که درخواست GET برای آدرس

www.sample.com می تواند نشان دهد آورده شده است:

خط اول نشان می دهد که نوع درخواست GET است. قسمت دوم )HTTP( از آن خط نشان می دهد که درخواست برای یک Domain است انتهای خط درخواست معلوم می کند که از نسخه ۱٫۱، HTTP استفاده می شود. )نسخه قبلی آن ۱٫۰ بوده است( اما درخواست به کجا ارسال شده است؟ این موضوع در خط دوم نشان داده شده است. خط دوم اولین Header در درخواست است. هدر Host، مقصد درخواست را نشان می دهد. ترکیب Host با اسلش جلو)/( در خط اول به سرور اعلام می کند که درخواست برای

www.sample.com است. )هدر Host در Http1.1 لازم است در نسخه قبل از آن لازم نبود.( خط سوم شامل User-Agent است، که هم اسکریپتهای سمت سرور و هم کلاینت به آن دسترسـی دارنـد و در برخی مرورگرها برای یافتن خطاهای منطقی لازم است. این اطلاعات توسط مرورگر مورد استفاده شما ایجاد می شوند. )در این مثال Firefox( و به صورت اتوماتیک در هر درخواست برای سرور ارسال می شوند. خـط آخر Connection است که برای نمونه بالا با Keep-Alive مقداردهی شده است. )می توانـد بـا مقـادیر دیگری نیز ست شود که خارج از بحث کتاب است.( توجه کنید که یک خط خـالی بعـد از آخـرین Header وجود دارد با اینکه هیچ بدنه درخواستی وجـود نـدارد ولـی خـط خـالی لازم اسـت. اگـر یـک زیـر دمـین ماننـد

www.sample.com/books را درخواست کنید درخواست شما به صورت زیر خواهد بود:

GET /books/ HTTP/1.1
Host: www.sample.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US;
     rv:1.7.6)
Gecko/20050225 Firefox/1.0.1
Connection: Keep-Alive

توجه داشته باشید که تنها خط اول تغییر کرده است که شامل قسمتی است که بعد از www.sample.com در URL آمده است.

GET / HTTP/1.1
Host: www.sample.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US;

rv:1.7.6)

Gecko/20050225 Firefox/1.0.1
Connection: Keep-Alive

 

ارسال پارامتر برای Get نیازمند این است که اطلاعات خارجی را به URL اضافه کنید:

URL ? name1=value1&name2=value2&..&nameN=valueN

این اطلاعات که رشته query نامیده می شوند، در خط درخواست از یک درخواست HTTP تکرار می شوند:

GET /books/?name=root%20Directory HTTP/1.1
Host: www.sample.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US;
     rv:1.7.6)
Gecko/20050225 Firefox/1.0.1
Connection: Keep-Alive

توجه کنید که متن “root Directory”، هنگامی که به عنوان پارامتر با URL ارسال می شود، بایستی رمزگذاری شود، به همین خاطر جای خالی با ۲۰% جایگزین می شود. به این امر encode کردن URL گفته می شود و در قسمت های مختلف HTTP استفاده می شود. )جاوااسکریپت یک تابع داخلی دارد که عملیات رمزگذاری و رمزگشائی URL را انجام می دهد. درباره این تابع بعداً در این فصل بحث خواهد شد.( مقادیر

فیلدهای مختلف با یک آمپرسند “&” از هم جدا می شوند. بسیاری از تکنولوژیهای سمت سرور به صورت خودکار بدنه درخواست را رمزگشائی می کنند و دسترسی به

این مقادیر را به روش های گوناگونی ممکن می سازند. البته، این مربوط به سرور است که با این داده ها چه کار کند. از سوی دیگر، درخواست POST، اطلاعات را به بدنه درخواست اضافه می کند. مثلا، زمانی که شما یک فرم online را پر و آن را submit می کنید، داده ها به صورت درخواست POST ارسال می شوند. اینجا نمونه ای از درخواست POST آمده است:

POST / HTTP/1.1
Host: www.sample.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US;

rv:1.7.6)

Gecko/20050225 Firefox/1.0.1
Content-Type: application/x-www-form-urlencoded
Content-Length: 40
Connection: Keep-Alive
name=root%20Directory&OS=Unix

بایستی به چندین تفاوت مهم بین درخواست POST و درخواست GET توجه کنید. اول اینکه خط درخواست بجای GET با POST شروع می شود، که نوع درخواست را نشان می دهد. شما می توانید ببینید که هدرهای Host و User-Agent همراه با دو مورد جدید سرجای خودشان هستند. هدر Content-Type نشان می دهد که بدنه درخواست چگونه کد شده است. مرورگر همیشه داده POST را به صورت application/x-www-form-urlencoded رمزگذاری می کند که رمزگذاری ساده URL از نوع MIME است. هدر Content-Length طول بایت های بدنه درخواست را نشان می دهد. پس از Connection یک خط خالی در بدنه درخواست وجود دارد، که در بیشتر مرورگرها یک جفت >نام-

مقدار< می سازد که در اینجا name برابر با root Directory و OS با Unix برابر است. شما می توانید ببینید که این فرمت شبیه پارامترهای رشته ای Query در URL است. همانطور که قبلا گفتیم، انواع دیگر درخواست HTTP وجود دارد، ولی آن ها نیز از فرمت های شبیه POST و GET تبعیت می کنند. گام بعدی

نگاه به چیزی است که سرور به سمت عقب )سمت مرورگر(، بعنوان پاسخ درخواست HTTP ارسال می کند. پاسخ HTTP

فرمتیکپاسخ HTTP،کهخیلیشبیهدرخواستآناست،درزیرآمدهاست:

همانطور که می بینید، تنها تفاوت پاسخ با یک درخواست این است که خط اول شامل اطلاعات وضعیت به جای اطلاعات درخواست است. خط وضعیت درباره منابع درخواست شده بوسیله یک کد حالت اطلاع رسانی می کند. اینجا یک پاسخ ساده HTTP آمده است:

<status-line>

<headers>

<blank line>

[<response-body>]
HTTP/1.1 200 OK
Date: Sat, 31 Dec 2005 23:59:59 GMT

دراین مثال خط وضعیت یک کد وضعیت HTTP، ۲۰۰ و یک پیغام ok است. خط وضعیت همیشه شامل کد وضعیت و یک پیغام کوتاه است. مهمترین کدهای حالات در زیر آمده اند: ۲۰۰ )ok(: منبع پیدا شده است و همه چیز خوب می باشد. ۳۰۰ )NOT MODIFIED(: منبع نتوانسته بعد درخواست آخر اصلاح شود. این کد بیشتر اوقات برای مکانیزم های cache مرورگر به کار می رود. ۴۰۱ )UNAUTHORIZED(: کلاینت حق دسترسی به منبع را ندارد. اغلب باعث می شود که مرورگر برای login به سرور نام کاربری و پسورد را درخواست کند. ۴۰۳)FORBIDDEN(: کلاینتدردسترسیبهمنابعباخطامواجعهشدهاست.ایننوعزمانیاتفاقمیافتد که شما بعد از ۴۰۱ نتوانید با یک اسم کاربری صحیحlogin کنید. ۴۰۴ )NOT FOUND(: منبع در محل مورد نظر وجود ندارد.

Content-Type: text/html;charset=ISO-8859-1
Content-Length: 122
<html>
<head>
<title>Wrox Homepage</title>

</head>

<body>

<!-- body goes here -->
</body>
</html>

در خط وضعیت، هدرهای دیگری نیز موجودند. بطور نمونه، سرور یک هدر Date را برمی گرداند که زمان و تاریخ ایجاد پاسخ را نشان می دهد. )سرور اطلاعاتی در مورد خودش نیز ارسال می کند، اگر چه مورد نیاز نباشند( دو هدر بعدی باید آشنا باشند، آن ها Content-Type و Content-Length که در درخواست POST نیز استفاده می شدند، هستند. در این مثال، هدر Content-Type نوع MIME را برای text/html با یک رمزگذاری از نوع ۱-۸۸۵۹-ISO تعیین می کند. )که استاندارد منابع انگلیسی ایالات متحده است.( بدنه پاسخ شامل یک کد HTML ساده است. این همان چیزی است که مرورگر به کاربر نشان خواهد داد. توجه کنید که اشاره ای به نوع درخواست که پاسخ برای آن ارسال می شود نیست؛ اگر چه، این مطلب اثری بر روی سرور ندارد. این مطلب مربوط به کلاینت است که بداند چه نوع داده ای برای هر نوع

درخواست بایستی به سمت عقب برگردانده شود تا تصمیم بگیرد چگونه از داده بایستی استفاده کند.

درخواست XMLHttp XMlHttp ابتدا در IE5 با یک ActiveX معرفی شد. شی XMlHttp توسعه دهندگان را به ایجاد درخواست Http از هر کجای یک برنامه قادر می سازد. برای این درخواست یک XML به عنوان پاسخ برگردانده می شود، به همین خاطرXMlHttp یک روش ساده برای دسترسی به اطلاعات از طریق XML را مهیا می کند. MozilaنیزبعداXMlHttpًرادرمرورگرهایخود)مانندFirefox( قرارداد.بعدازآنمرورگرهای Safari )بعد از نسخه ۱,۲( و Opera )نسخه ۷,۶ به بالا( از آن حمایت کردند. امروزه، تقریبا اکثر مرورگرهای مطرح از این نوع درخواست حمایت می کنند. باید توجه داشت که XMlHttp استاندارد W3C نیست، به همین خاطر رفتارهای متفاوتی از آن را می توان در مرورگرهای مختلف مشاهده کرد، ولی اکثر متدها و صفات مهم در همه آن ها به یک صورت حمایت می شوند. بایستی به این موضوع اشاره کرد که اگر کاربران با مرورگرهای قدیمی تر به وب شما دسترسی دارند بایستی در انتخاب این گزینه تجدید نظر کنید.

بیشتر بخوانید:  دوره React Native

ایجادشی XMlHttp برای ارسال درخواست و پردازش پاسخ بایستی ابتدا یک شیXMLHttpRequest با استفاده از

جاوااسکریپت ایجاد کنید. با توجه به این موضوع که XMLHttpRequest استاندارد W3C نیست، می بایستی از روش های که مرورگرها از آن حمایت می کنند به ایجاد شی مبادرتت کرد. IE، بوسیله یک شی ،Firefox را ایجاد می کند در حالی که مرورگرهای دیگر مانند XMLHttpRequest شی ،ActiveX Safari،Opera، آن را به صورت یک شی جاوااسکریپتی پیاده سازی می کنند. بخاطر این موضوع، کد

جاوااسکریپت بایستی شامل هر دو روش ایجاد یک نمونه XMLHttpRequest با استفاده از تکنیک

ActiveX و شی جاوااسکریپتی باشد.

برای انجام این کار احتیاجی به دانستن نوع مرورگر نیست، تنها چیزی که بایستی انجام بدهید این است که چک

کنید آیا مرورگر از ActiveX حمایت می کند یا نه؟ در صورت پشتیبانی کردن، شی

XMLHttpRequest را با استفاده از تکنیک ActiveX در غیر اینصورت از شی محلی جاوااسکریپتی

برای این منظور استفاده می کنید. برای اینکه در IE با استفاده از ActiveX بخواهید یک شی

XMLHttpRequest را نمونه سازی کنید، بایستی به صورت زیر عمل کنید. var xmlHttp = new ActiveXObject(iEVersion[i]);

مشکلی که اینجا وجود دارد، وجود چندین نسخه از کتابخانه های MSXML است. چون هر نسخه سرعت و ثبات خود را دارد، باید مطمئن شویدکه از جدیدترین نسخه که ماشین کاربر از آن حمایت می کند استفاده می کنید یا نه؟ بدین منظور باید نسخه های موجود را بررسی کنید.

نسخه های موجود MSXML به قرار زیر می باشد:

- Microsoft.XMLHttp
- MSXML2.XMLHttp
- MSXML2.XMLHttp.3.0
- MSXML2.XMLHttp.4.0
- MSXML2.XMLHttp.5.0

متاسفانه، تنها راه تشخیص بهترین نسخه برای استفاده، سعی در ایجاد هر یک از این نسخه ها می باشد. بخاطر اینکه این نسخه ها کنترل ActiveX هستند، ناتوانی در ایجاد هر یک از آن ها منجر به ایجاد یک خطا خواهد شد، این مورد به این معنی است که شما بایستی از بلوک try…catch استفاده کنید. در اینصورت با ایجاد یک خطا در یک ActiveX سعی در ایجاد یک نمونهXMLHttpRequest با استفاده از ActiveX بعدی می کند. ایجاد شی XMLHttp در مرورگرهای دیگر بسیار ساده می باشد، تنها کافی است از کد زیر

function createXMLHttp() {

var xmlHttp = new XMLHttpRequest();

برای این منظور استفاده کنید: نتیجه کار به صورت زیر خواهد بود:

if (typeof XMLHttpRequest !=”undefined”){

return new XMLHttpRequest()

}else if (window.ActiveXObject){

var iEVersion = [ “MSXML2.XMLHttp.5.0”,

"MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0",
"<MSXML2.XMLHttp","Microsoft.XMLHttp"

;]

for (var i=0; i< iEVersion.length; i++){

 

شروع کار با Ajax try{

var xmlHttp = new ActiveXObject(iEVersion[i]);

return xmlHttp; }catch(oError){

هیچ عملی انجام نمی گیرد//

}

throw new Error(“XMLHttp object could be created.”); }

تابع createXMLHttp ابتدا با استفاده از عملگر typeof چک می کند که آیا کلاس XMLHttpRequest تعریف شده است یا نه؟)مرورگر ازآن پشتیبانی می کند یا نه؟( اگر XMLHttpRequest موجود بود، از آن برای ایجاد شی XMLHttp استفاده می کند، در غیر اینصورت چک می کند که آیا کلاس ActiveXObject موجود است یا نه؟ در صورت وجود، دسته ActiveX ها را در یک آرایه قرار می دهد. ) جدیدترین نسخه ابتدای آرایه قرار می گیرد. ( با استفاده از یک حلقه تکرار ActivX ها را از آرایه خوانده و سعی می کند یک نوع XMLHttp ایجاد کند اگر این کار امکان نداشت، عبارت catch از ایجاد خطا و توقف عملیات جلوگیری می کند، سپس مورد بعدی آرایه مورد آزمایش قرار می گیرد. زمانی که یک شی ایجاد شد، با برگرداندن آن شی عملیات به پایان می رسد، در غیر اینصورت یک خطا با استفاده از دستور throw ایجاد می کند که نشان می دهد عملیات با شکست مواجه شده است.

متدها و صفات

اکنون توانسته اید یک شی XMLHttp ایجاد کنید. همانطور که دیدید برای ایجاد این شی در مرورگرهای مختلف روشهای مختلفی را اعمال کردیم، به همین خاطر تفاوتهایی نیز در متدها و صفات این شی در مرورگرهای مختلف خواهیم دید. می توانید صفات شی XMLHttpRequest ایجاد شده در IE را در جدول ۱-۳ و متدهای آن را در جدول ۲-۳، مشاهده کنید. صفات این شی در مرورگرهای

netScape،Mozila و Firefox در جدول ۳-۳ و متد های آن در جدول ۴-۳ آمده است. Apple safari هنوز متدها و صفات کامل برای شی XMLHttpRequest را اعلام نکرده است، اما مجموعه ای از صفات عمومی مورد استفاده را اعلام کرده است، که در جدول ۵-۳ آمده است و متدهای

عمومی، نیز در جدول ۶-۳ آمده است.

} }

Property

Means

Read/write

onreadystatechange
Holds the name
of the
event handler
that should be
called when the
value
of the
readyState
property changes

Read/write

readyState

Holds the state
of the request

Read-only

responseBody
Holds a response
body, which is
one way HTTP
responses can be
returned

Read-only

responseStream
Holds a response
stream, a binary
stream to the
server

Read-only

responseText
Holds the
response body as
a string

Read-only

responseXML

Holds the
response body as
XML

Read-only

status

Holds the HTTP
status code
returned by a
request

Read-only

statusText

Holds the HTTP
response status
text

Read-only

جدول۱-۳ خاصیتهایشیXMLHttpRequestدرIE

Method

Means

abort

Aborts the HTTP request
getAllResponseHeaders
Gets all the HTTP
headers
getResponseHeader
Gets the value of an
HTTP header

open

Opens a request to the
server

send

Sends an HTTP request to
the server

 

setRequestHeader
Sets the name and value
of an HTTP header

جدول۲-۳ متدهایشیXMLHttpRequestدرIE

Property

Means

Read/write

channel

Holds the channel
used to perform the
request

Read-only

readyState

Holds the state of
the request

Read-only

responseText
Holds the response
body as a string

Read-only

responseXML

Holds the response
body as XML

Read-only

status

Holds the HTTP
status code
returned by a
request

Read-only

statusText

Holds the HTTP
response status
text

Read-only

جدول ۳-۳ خاصیت های شی XMLHttpRequest در مرورگرهای نظیر firefox

Method

Means

abort

Aborts the HTTP request
getAllResponseHeaders
Gets all the HTTP
headers
getResponseHeader
Gets the value of an
HTTP header

openRequest

Native (non-script)
method to open a request
overrideMimeType
Overrides the MIME type
the server returns

جدول ۴-۳ متدهای شی XMLHttpRequest در مرورگرهای نظیر firefox

 

Property

Means

Read/write

onreadystatechange
Holds the name
of the event
handler that
should be called
when
the value of the
readyState
property changes

Read-only

readyState

Holds the state
of the request

Read-only

responseText
Holds the
response body as
a string

Read-only

responseXML

Holds the
response body as
XML

Read-only

status

Holds the HTTP
status code
returned by a
request

Read-only

statusText

Holds the HTTP
response Read-
only
status text

Read-only

جدول۵-۳ خاصیت های شی XMLHttpRequest برای safari

Method

Means

abort

Aborts the HTTP request
getAllResponseHeaders
Gets all the HTTP
headers
getResponseHeader
Gets the value of an
HTTP header

open

Opens a request to the
server

send

Sends an HTTP request to
the server
setRequestHeader
Sets the name and value
of an HTTP header

جدول۶-۳ متدهایشیXMLHttpRequestبرایsafari

 

اجازه بدهید به متدهای مهمی که در اینجا اشاره شد نگاهی داشته باشیم: متد )(open: برای استفاده از شی XMLHttpRequest با استفاده از متد )(open بر روی شی پیکربندی اولیه را انجام می دهید. اینجا طریقه استفاده از متد open را نشان می دهیم )توجه کنید که آیتم های بین براکت ها، ]و[، موارد اختیاری می باشند(

این متد دارای ۲ پارامتر اصلی و۳ پارامتر اختیاری می باشد. جدول ۷-۳ این پارامترها را توضیح می دهد:

open(string method, string URL [,boolean asyncFlag [, string

username [,string password]]])

معنی آن

پارامتر

متد HTTP که برای ایجاد ارتباط در open استفاده

می شود، مانند ,GET, POST, PUT, HEAD or PROPFIND

method

آدرسی که از آنجا درخواست صورت می گیرد

URL

مقدار بولی که مشخص غیر همزمان بودن درخواست را مشخص می کند

asyncFlag

نام کاربری

username

کلمه عبور

password

جدول ۷-۳ پارامترهای متد open
توجه کنید که asyncFlag به صورت پیش فرض true می باشد. True بودن این پارامتر لازمه روش ajax می باشد، در صورت False بودن آن هدف استفاده از XMLHttpRequest زیر سوال می رود.

البته ممکن است این مقدار را در برخی مواقع مانند اعتبارسنجی ورودی های کاربر مفید باشد. متد)(send: در حقیقت این متد درخواست را ارسال می کند. اگر درخواست به صورت asynchronous تعریف شده باشد، این متد فوراً به اتمام میرسد، در غیر اینصورت برای رسیدن پاسخ منتظر

می ماند. این متد به صورت زیر تعریف می شود:

send([content])

پارامتر اختیاری می تواند یک نمونه از شی DOM باشد و یا یک رشته یا یک استریم ورودی باشد، در غیر اینصورت مقدار null می گیرد. این مقدار به عنوان قسمتی از درخواست ارسال می شود. متد setRequestHeader : این متد مقدار header درخواست را تنظیم می کند. این متد به صورت زیر تعریف می شود:

setRequestHeader(string header, string value)

یک رشته برای تنظیم header و یک رشته که نوع محتوا را نشان می دهد را به عنوان پارامتر دریافت می کند. این متد پس از متد open مقدار دهی می شود.

مثلا اگر بخواهید داده هایتان را به صورت Xml ارسال کنید Header درخواستتان را با نوع محتوای

“text/xml” تنظیم می کنید: xMLHttp.setRequestHeader(“Content-Type”, “text/xml”);

سپس می توانید مستقیما xml تان را به صورت مستقیم با استفاده از متد send ارسال کنید، که می تواند چیزی شبیه این باشد:

xMLHttp.send(“<doc><name>limit</name><data>5</data></doc>”);

متد )(abort: از ارسال درخواست جلوگیری می کند. متد )(getAllResponseHeaders: این متد یک رشته محتوی هدرهای یک پاسخ برای یک درخواست Http را برمی گرداند. هدرها شامل Content-Length, Date وURL هستند.

اولین برنامه ساده Ajax اکنون که با متد های XMLHttp آشنا شدید اجازه بدهید با یک مثال ساده، هم یک برنامه با روش Ajax ایجاد کنیم و هم اینکه صفات شی XMLHttp را توضیح دهیم. در این مثال از کاربر خواسته می شود که کلید روی صفحه وب را کلیک کند، پس از فشردن کلید، برنامه بوسیله تکنیک Ajax اطلاعات را از سرور خوانده و آن ها را در صفحه وب نمایش می دهد. این عملیات بدون بارگذاری مجدد صفحه کاربر انجام خواهد شد. سعی ما این است که طریقه ایجاد برنامه را توضیح دهیم. در ابتدای کار یک صفحه وب که شامل یک شی Button و شی Divمی باشد را ایجاد می کنیم.

بیشتر بخوانید:  شی چیست؟

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<input type="button" value="Display Message" >
<div id="targetDiv">
<p>Display Message Hear.</p>

</div>

</body>

</html>

این کد، صفحه با یک کلید و یک متن بر روی آن را ایجاد خواهد کرد. اما کلیک بر روی کلید منجر به هیچ عملی نخواهد شد. در onClick دکمه قسمت کدی را اضافه می کنیم که با فشردن کلید عملیات گفته شده را انجام دهد.کد زیر کد تصحیح شده قسمت قبل می باشد:

<html>
 <head>
     <title>Untitled Document</title>

 

</head>

<body>

<input type="button" value="Display Message"  onclick =
           "getData('Data.txt','targetDiv')">
     <div id="targetDiv">
          <p>Display Message Hear.</p>

</div>

 </body>
</html>

همانطور که می بینید تابع getData دو پارامتر رشته ای می گیرد: نام فایل رشته ی Data.txt، و محلی که محتوای این فایل نمایش داده می شودtargetDiv. فشردن کلید روی صفحه وب جز یک پیغام خطا عکس العمل دیگری به همراه نخواهد داشت. همانطور که قبلا اشاره شد برای کار با برنامه های Ajax احتیاج به یک شی XMLHttp می باشد، قبلا طریقه ی ایجاد شی XMLHttp را توضیح دادیم، اکنون بدون توضیح اضافه ی تابع createXMLHttp که این وظیفه را بر عهده داشت به برنامه اضافه می کنیم.

<head>
     <title>First Project of Ajax</title>
<script language = "javascript">
function createXMLHttp() {
if (typeof XMLHttpRequest !="undefined"){
return new XMLHttpRequest()
}else if (window.ActiveXObject){
var iEVersion = [ "MSXML2.XMLHttp.5.0",
"MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0",
"<MSXML2.XMLHttp","Microsoft.XMLHttp"

;]

for (var i=0; i< iEVersion.length; i++){

try{

var xmlHttp = new
return xmlHttp;
ActiveXObject(iEVersion[i]);
}catch(oError){

هیچ عملی انجام نمی گیرد//

}

} }

}

</script>

</head>

throw new Error("XMLHttp object could be

created.”);

اکنون نیازمند این هستید که از طریق تابع بالا یک نمونه شی XMLHttp ایجاد کنید. و از این نمونه شی برای انجام عملیات مورد نظر استفاده کنید. اکنون سوالی که مطرح می شود این است که چگونه از این شی برای خواندن و نمایش اطلاعات استفاده کنیم؟ همه این عملیات در تابع getData پیاده سازی می شود.

<script language = "javascript">
..          

.. .. ..

          function getData(dataSource, divID){

.. .. ..

در این تابع ابتدا یک متغیر از نوع شی XMLHttp ایجاد می کنیم.

<script language = "javascript">
..          

.. .. ..

          function getData(dataSource, divID){
               xmlHttp = createXMLHttp();

.. .. ..

اکنون یک نمونه از شی XMLHttp در متغیر xmlHttp دارید، اکنون با متد open همانطور که قبلا توضیح داده شد شی xmlHttp را برای استفاده از URL مورد نظر پیکربندی می کنیم. اغلب از متد GET زمانی که می خواهید اطلاعاتی را بازیابی کنید استفاده می شود و از متد POST زمانی استفاده می شود که بخواهید تعدادی داده برای سرور ارسال کنید. در این مثال با استفاده از GET برای خواندن فایل Data.txt به صورت

 

} </script>

} </script>

<script language = "javascript">
..          

..

زیر عمل می کنیم:

 

شروع کار با Ajax

.. ..

          function getData(dataSource, divID){
               xmlHttp = createXMLHttp();
               xmlHttp.open("GET", dataSource);

.. .. ..

این کد شی xmlHttp را با استفاده از URl ای که مشخص نموده اید )در اینجا Data.txt( پیکر بندی

می کند، اما هنوز به صورت واقعی به فایل مورد نظر وصل نشده است. )اگر از یک دامین خاص استفاده می

کنید آدرس URL مورد نظر بایستی شامل آدرس دامین نیز باشد(

به صورت پیش فرض این ارتباط به صورت asynchronous می باشد، که بدین معنی است که برنامه منتظر

خواندن فایل و دانلود آن نمی ماند. )شما می توانید از گزینه سوم asyncFlag، برای اجرای

synchronous برنامه استفاده کنید، که به این معنی خواهد بود که برنامه همه فعالیت های خود را تا زمان

دانلود فایل متوقف کند.(

حال فرض کنیم شما اطلاعاتتان را برای سرور ارسال کرده اید و سرور به درخواست شما پاسخ داده و فایل

Data.txt را برایتان ارسال کرده است.اکنون چگونه بایستی از آماده بودن اطلاعاتتان برای دانلود آگاه

شوید تا بتوانید از آن ها استفاده کنید؟

شی XMLHttp یک property )صفت ( با نام onreadystatechange دارد که برای این منظور

تدارک دیده است. این property اجازه مدیریت عملیات بارشدن asynchronous را به شما می دهد.

اگر شما نام یک تابع را برای این property مشخص کنید، هر زمان که تغییری در اسکریپت شما ایجاد شد

این property فراخوانی می شود، و آن نیز تابع شما را فراخوانی می کند. البته چون این تابع در موارد دیگر

کاربردی ندارد می توانید به صورت زیر آن را داخل تابع getData ایجاد کنید:

<script language = "javascript">
..          

.. .. ..

          function getData(dataSource, divID){
               xmlHttp = createXMLHttp();
               xmlHttp.open("GET", dataSource);
               xmlHttp.Onreadystatechange = function(){

..

} </script>

.. }

..

.. }

</script>
این تابع جدید هر زمان که در شی xmlHttp تغییری ایجاد شود فراخوانی خواهد شد. شما بایستی دو

property از این شی را بررسی کنید: صفات readyState و readyState .status که وضعیت لود شدن داده ها را اعلام می کند، اینجا مقادیر ممکنی که readyState می تواند داشته باشد را می آوریم:

)مقدار دهی نشده( uninitialized 0 – )در حال لود( loading 1 –
)لود شده( loaded 2 –
)در حال تبادل داده( interactive 3 – )کامل( complete 4 –

توجه کنید که ۴ به معنی این است که داده های شما کاملا دانلود شده اند. صفت status: در اینجا برخی مقادیر ممکن برای status آمده است )توجه کنید که ۲۰۰ بدین معنی است که همه چیز خوب پیش می رود.(

– ۲۰۰ OK
– ۲۰۱ Created
– ۲۰۴ No Content
– ۲۰۵ Reset Content
– ۲۰۶ Partial Content
– ۴۰۰ Bad Request
– ۴۰۱ Unauthorized
– ۴۰۳ Forbidden
– ۴۰۴ Not Found
– ۴۰۵ Method Not Allowed
– ۴۰۶ Not Acceptable
– ۴۰۷ Proxy Authentication Required – 408 Request Timeout
– ۴۱۱ Length Required
– ۴۱۳ Requested Entity Too Large
– ۴۱۴ Requested URL Too Long
– ۴۱۵ Unsupported Media Type
– ۵۰۰ Internal Server Error
– ۵۰۱Not Implemented
– ۵۰۲ Bad Gateway
– ۵۰۳ Service Unavailable
– ۵۰۴ Gateway Timeout
– ۵۰۵ HTTP Version Not Supported

شروع کار با Ajax

 

 

برای اطمینان از دانلود کامل اطلاعاتتان و خوب بودن همه چیز، باید مطمئن شوید که صفت readyState

برابر ۴ و صفت status با ۲۰۰ برابر است. اینجا چگونگی پیاده سازی آن را نمایش می دهیم:

<script language = "javascript">
..          

.. .. ..

          function getData(dataSource, divID){
               xmlHttp = createXMLHttp();
               xmlHttp.open("GET", dataSource);
               xmlHttp.Onreadystatechange = function(){

} </script>

if(xmlHttp.readyState == 4 &&

..

.. }

} .. ..

xmlHttp.status == 200)

حالا مرورگر اطلاعات را بدست آورده است، ولی شما چگونه می توانید به این اطلاعات دسترسی داشته باشید. برای گرفتن داده ها از شی XMLHttp دو روش وجود دارد: – اگر شما با داده های دریافتی می خواهید همانند متن استاندارد رفتار کنید، شما می توانید از صفت responseText شی XMLHttp استفاده کنید – اگردادهشمابصورتXMLمیباشد،میتوانیدازصفتresponseXMLاستفادهکنید. در این مثال فایل Data.text محتوی متن می باشد، به همین خاطر شما بایستی از صفت responseText استفاده کنید. برای اینکه داده دانلود شده را در صفحه وبتان در محلی که می خواهید ببینید، می توانید آن را در یک Div که با targetDiv،ID که در صفحه موجود می باشد و به عنوان پارامتر به تابع getData ارسال شده، نمایش دهید:

<script language = "javascript">
..          

.. .. ..

          function getData(dataSource, divID){

{

 با  ۵۸ xmlHttp = createXMLHttp();

               xmlHttp.open("GET", dataSource);
               xmlHttp.Onreadystatechange = function(){
               if(xmlHttp.readyState == 4 &&
                    xmlHttp.status == 200){
                    obj.innerHTML = xmlHttp.responseText;

} } .. ..

اکنون شما کدتان را برای مدیریت پاسخ سرور، زمانی که پاسخ را دریافت کردید آماده کرده اید. اما اکنون چگونه به صورت واقعی برای دریافت این پاسخ به سرور وصل شوید؟ برای این کار از متد send استفاده می کنید. این متد قبلا توضیح داده شد، زمانی که از متد GET استفاده می کنید مقدار null برای سرور ارسال می

} </script>

<script language = "javascript">
..          

.. .. ..

          function getData(dataSource, divID){
               xmlHttp = createXMLHttp();
               xmlHttp.open("GET", dataSource);
               xmlHttp.Onreadystatechange = function(){
               if(xmlHttp.readyState == 4 &&
                    xmlHttp.status == 200){

کنید:

} </script>

        obj.innerHTML = xmlHttp.responseText;
}   

}

xmlHttp.send (null);

اکنون برنامه شما اطلاعات درخواستی را به سرور ارسال می کند و قسمت مدیریت، اطلاعات دریافتی را به شما نشان می دهد. این اولین برنامه واقعی شما تحت برنامه Ajax بود. برنامه در پشت صحنه اطلاعاتی را از سرور دریافت و به شما نمایش می دهد، بدون اینکه وب شما همه فعالیت های خود را تا رسیدن اطلاعات متوقف

کرده و برای نمایش داده ها صفحه را refresh کند. کدهای کامل این مثال در CD کتاب در مسیر

\۱\example\xmlhttp با نام firstAjax.html موجود می باشد. متد GET در XMLHTTP

حال که با چگونگی کار XMLHttp آشنا شدید، اکنون با دو مثال طریقه استفاده از متد های GET و POST را خواهیم دید.در این مثال یک کاربر شماره مشتری را وارد می کند و اطلاعات مربوط به کاربر را دریافت می کند. در این مثال از PHP که یک زبان متن باز سمت سرور بسیار خوب است و MySql به عنوان بانک اطلاعاتی استفاده شده است. برای شروع کار ابتدا باید جدول مربوط به کاربر را در mySql ایجاد کنید.می توانید این جدول را به صورت زیر ایجاد کنید:

CREATE TABLE `user` (
`ID` INT NOT NULL AUTO_INCREMENT ,
`username` VARCHAR( 50 ) NOT NULL ,
`firstname` VARCHAR( 50 ) NOT NULL ,
`lastname` VARCHAR( 50 ) NOT NULL ,
`password` VARCHAR( 50 ) NOT NULL ,
`age` INT NOT NULL ,
`gender` CHAR( 1 ) NOT NULL ,
`status` TINYINT NOT NULL ,
PRIMARY KEY ( `ID` )

😉

مهمترین فیلد در این جدول CustomerId می باشد که برای گرفتن اطلاعات کاربر از آن استفاده می کنید. ابتدا فایل PHP را ایجاد می کنیم. اولین کار، تعریف همه داده های است که با آن ها سروکار دارید. در این مثال، این داده ها عبارتند از کد مشتری برای جستجو، متغیرsInfo$ که اطلاعات را برمی گرداند و اطلاعات مربوط به اتصال به بانک اطلاعاتی. )سرور بانک اطلاعاتی، نام بانک اطلاعاتی، نام کاربر، پسورد و یک رشته

<?php

$sID = $_GET["id"];
$sInfo = "";
$sDBServer = "your.databaser.server";
$sDBName = "your_db_name";
$sDBUsername = "your_db_username";
$sDBPassword = "your_db_password";
$sQuery = "Select * from user where ID=".$sID;
..
..
..

دستوری Sql(

>?

این کد با گرفتن id شروع می شود. PHP برای سادگی اطلاعات ارسالی از سمت کاربر را در یک آرایه GET_$ قرار می دهد. این id در sID$ ذخیره می شود، که در ایجاد Sql ،Query ذخیره شده در sQuery$ مورد استفاده قرار می گیرد. متغیر sInfo$ نیز اینجا ایجاد می شود و با یک رشته خالی مقدار دهی می شود.کدهای دیگر مربوط به تنظیمات بانک اطلاعاتی می باشد که شما بایستی با اطلاعات صحیح آن را تنظیم کنید.کار بعدی اتصال به بانک اطلاعاتی و اجرای Query و برگرداندن نتیجه می باشد. اگر کاربری با ID که حاوی اطلاعات مشتری است پر می شود، اگر Html با کد $sInfo ،داده شده موجود باشد ID

بیشتر بخوانید:  دوره JAVASCRIPT

نامعتبر باشد، sInfo$ با یک پیغام خطا برای نشان دادن در صفحه وب مقدار دهی می شود. $sID = $_GET[“id”];

<?php
     $sInfo = "";
     $sDBServer = "your.databaser.server";
     $sDBName = "your_db_name";
     $sDBUsername = "your_db_username";
     $sDBPassword = "your_db_password";
     $sQuery = "Select * from user where ID=".$sID;

{

}

}

     mysql_close($oLink);

>?
دو خط اول در کدهای پررنگ شده، شامل اتصال به بانک اطلاعاتی از طریق دستورات PHP می باشد. تابع

)(mysql_query برای اجرای Query مورد نظر فراخوانی می شود. اگر تابع مقداری را برگرداند که تنها شامل یک سطر بود آنگاه برنامه برای گرفتن اطلاعات وذخیره آن ها در sInfo$ ادامه پیدا می کند، در غیر اینصورت sInfo$ با یک پیغام خطا مقدار دهی می شود. کد صفحه آخر برای پاک کردن ارتباط بانک

اطلاعاتی به کار می رود. حال بایستی اطلاعات را برای استفاده در XMLHttp به آن پاس دهیم.

 

$oLink =

mysql_connect($sDBServer,$sDBUsername,$sDBPassword);
@mysql_select_db($sDBName) or $sInfo=" Unable to open

database”;

if($oResult = mysql_query($sQuery) and
mysql_num_rows($oResult) > 0)
$aValues = mysql_fetch_array($oResult,MYSQL_ASSOC);
$sInfo = $aValues['firstname']."<br

else {

/>".$aValues['lastname'].
"<br />".$aValues['age']."<br
/>".$aValues['gender']."<br />";
$sInfo = "Customer with ID $sID doesn't exist.";

<?php

     header("Content-Type: text/plain");
     $sID = $_GET["id"];
     $sInfo = "";
     $sDBServer = "your.databaser.server";
     $sDBName = "your_db_name";
     $sDBUsername = "your_db_username";
     $sDBPassword = "your_db_password";
     $sQuery = "Select * from user where CustomerId=".$sID;
     $oLink =
     mysql_connect($sDBServer,$sDBUsername,$sDBPassword);
     @mysql_select_db($sDBName) or $sInfo=" Unable to open
     database";
     if($oResult = mysql_query($sQuery) and
        mysql_num_rows($oResult) > 0)
{     
       $aValues = mysql_fetch_array($oResult,MYSQL_ASSOC);
       $sInfo = $aValues['firstname']."<br
          />".$aValues['lastname']."
          <br />".$aValues['age']."<br />".$aValues['gender'].
          "<br />";

} else {

       $sInfo = "Customer with ID $sID doesn't exist.";
}     
     mysql_close($oLink);

echo $sInfo;

>?
دو تغییر را می توانید ببینید، اولی در ابتدای فایل انجام شده است، جایی که تابع )(header برای تنظیم نوع

محتوای صفحه مورد استفاده قرار می گیرد. با اینکه اغلب صفحه یک تکه کد Html بر می گرداند، اما بهتر است که با text/plain تنظیم شود. بخاطر اینکه یک صفحه کامل HTML نیست. شما بایستی Header همه صفحات غیر html ای که به مرورگر می فرستید را تنظیم کنید. تغییر دوم در زیر برنامه قرار دارد، جای که sInfo$ به عنوان یک استریم با دستور echo به خروجی داده می شود. حال به سمت کلاینت می رویم

و به تنظیم برنامه وب می پردازیم. ابتدا صفحه وبی را به صورت زیر ایجاد می کنیم:

<p>Enter customer ID number to retrieve information:</p>
<p>Customer ID: <input type="text" id="txtCustomerId" value=""
/></p>
<p><input type="button" value="Get Customer Info"
     onclick="requestCustomerInfo()" /></p>
<div id="divCustomerInfo"></div>

 تابع)(requestCustomerInfo با استفاده از XMLHttp اطلاعات ارسالی را از فایل PHP گرفته و آن

ها را نمایش می دهد.

function requestCustomerInfo() {
var sId = document.getElementById("txtCustomerId").value;
var oXmlHttp = createXMLHttp();
oXmlHttp.open("get", "secondAjax.php?id=" + sId, true);
oXmlHttp.onreadystatechange = function () {
if (oXmlHttp.readyState == 4) {
if (oXmlHttp.status == 200) {
displayCustomerInfo(oXmlHttp.responseText);

} else {

displayCustomerInfo("An error occurred: "+
oXmlHttp.statusText);

} }

}
تابع requestCustomerInfo مقدار موجود در txtCustomerId را به عنوان ID مشتری دریافت

و آن را در متغیر sId ذخیره می کند سپس با استفاده از تابع createXMLHttp یک شی XMLHttp ایجاد می کند. متد )(open برای مشخص کردن یک درخواست GET غیرهمزمان، برای فراخوانی صفحه secondAjax.php می باشد. )که ID گفته شده به عنوان اضافه شده است.( سپس مقدار readyState را بررسی می کند که اگر برابر با ۴ بود بعد وضعیت status را بررسی می کند اگر status خوب بود)برابر با ۲۰۰( آنگاه تابع )(displayCustomerInfo برای نمایش اطلاعات

کاربر فراخوانی می شود. اگر عملیات با خطا روبرو شود اطلاعات خطا به این تابع ارسال می شود.

}
در این تابع ابتدا، خط اول یک ارجاع به المنت Div برای نمایش اطلاعات صورت می گیرد. در خط دوم،

اطلاعات کاربر)sText(، خاصیت innerHTML المنت Div را مقدار دهی می کند. استفاده از innerHTML این امکان را می دهد که در Div بتوانیم مقادیر html قرار دهید. کدهای کامل این مثال در CD کتاب در مسیر ‘\۲\example\ xmlhttp’موجود می باشد

متد POST در XMLHTTP اکنون که دیدید XMLHttp چگونه کار با GET را آسان می کند، زمان آن است که به درخواست POST نیز

نگاهی بیاندازیم.

;}

oXmlHttp.send(null);
function displayCustomerInfo(sText) {
var divCustomerInfo =
document.getElementById("divCustomerInfo");
divCustomerInfo.innerHTML = sText;

 

ابتدا با فایلSaveCustomer.php که مدیریت درخواستهای POST را به عهده دارد شروع می کنیم. کد

PHP، وظیفه استفاده از اطلاعات موجود در درخواست و ذخیره آن ها را بر عهده دارد. با توجه به اینکه این

یک درخواست POST است، آرایه POST_$ شامل تمام تمامی اطلاعاتی است که ارسال می شود: <?php

     $sStatus = "";
$sName = $_POST["txtName"];
$sAddress = $_POST["txtAddress"];
$sCity = $_POST["txtCity"];
$sState = $_POST["txtState"];
$sZipCode = $_POST["txtZipCode"];
$sPhone = $_POST["txtPhone"];
$sEmail = $_POST["txtEmail"];
$sDBServer = "your.database.server";
$sDBName = "your_db_name";
$sDBUsername = "your_db_username";
$sDBPassword = "your_db_password";
$sSQL = "Insert into
Customers(Name,Address,City,State,Zip,Phone,'E-
mail')"."values('$sName','$sAddress','$sCity',
'$sState','$sZipCode'". ", '$sPhone', '$sEmail')";
     //more here
>?

این تکه کد همه اطلاعات را از طریق POST دریافت می کند، علاوه بر این، یک پیغام وضعیت )sStatus$(، و اطلاعات مربوط به بانک را ایجاد می کند، عبارت SQL در این مثال INSERT است، که همه اطلاعات بازیابی شده را ذخیره می کند.

<?php
     $sName = $_POST["txtName"];
     $sAddress = $_POST["txtAddress"];
     $sCity = $_POST["txtCity"];
     $sState = $_POST["txtState"];
     $sZipCode = $_POST["txtZipCode"];
     $sPhone = $_POST["txtPhone"];
     $sEmail = $_POST["txtEmail"];
     $sStatus = "";
     $sDBServer = "your.database.server";
     $sDBName = "your_db_name";
     $sDBUsername = "your_db_username";
     $sDBPassword = "your_db_password";
$sSQL = "Insert into Customers(Name,Address,City,State,
Zip,Phone,'E-mail') ". " values
('$sName','$sAddress','$sCity','$sState',
 '$sZipCode'". ", '$sPhone', '$sEmail')";

$oLink =

mysql_connect($sDBServer,$sDBUsername,$sDBPassword);
@mysql_select_db($sDBName) or $sStatus = "Unable to open

database”;

if($oResult = mysql_query($sSQL)) {

} else {

$sStatus = "Added customer; customer ID is
".mysql_insert_id();
$sStatus = "An error occurred while inserting;
customer not saved.";

}

     mysql_close($oLink);

>?
اینجا، نتیجه تابع )(mysql_query یک شاخص برای تائید درستی عملیات است. در صورت درستی، متغیر

sStatus$ با پیغامی که موفقیت عملیات ذخیره وID مشتری، را نشان می دهد، مقداردهی می شود. تابع )(mysql_insert_id همیشه جدیدترین مقدار auto-incremented را بر می گرداند. در صورتیکه، عملیات درج به درستی انجام نشده باشد sStatus$ با یک پیغام خطا مقدار دهی می شود. حال اطلاعات نوع محتوا و عملیات ارسال متن را اضافه می کنیم.

<?php

header("Content-Type: text/plain");
$sName = $_POST["txtName"];
$sAddress = $_POST["txtAddress"];
$sCity = $_POST["txtCity"];
$sState = $_POST["txtState"];
$sZipCode = $_POST["txtZipCode"];
$sPhone = $_POST["txtPhone"];
$sEmail = $_POST["txtEmail"];
$sStatus = "";
$sDBServer = "your.database.server";
$sDBName = "your_db_name";
$sDBUsername = "your_db_username";
$sDBPassword = "your_db_password";
$sSQL = "Insert into Customers(Name,Address,City,
     State,Zip,Phone,'E-mail') ". " values
     ('$sName','$sAddress','$sCity','$sState',
     '$sZipCode'". ", '$sPhone', '$sEmail')";
     $oLink =
     mysql_connect($sDBServer,$sDBUsername,$sDBPassword);
     @mysql_select_db($sDBName) or $sStatus = "Unable to open
     database";
     if($oResult = mysql_query($sSQL)) {
          $sStatus = "Added customer; customer ID is
            ".mysql_insert_id();
     } else {
           $sStatus = "An error occurred while inserting;
                customer not saved.";

}

     mysql_close($oLink);
     echo $sStatus;

>?

تابع header برای تنظیم نوع محتوا و تابع echo برای ارسال sStatus$ استفاده می شود. در صفحه اصلی یک تگ form برای دریافت اطلاعات کاربر ایجاد می کنیم:

<form method="post" action="SaveCustomer.php"
     onsubmit="sendRequest(); return false">
     <p>Enter customer information to be saved:</p>
     <p>Customer Name: <input type="text" name="txtName"
     value="" /><br />
     Address: <input type="text" name="txtAddress" value=""
     /><br />
     City: <input type="text" name="txtCity" value="" /><br />
     State: <input type="text" name="txtState" value="" />
     <br />
     Zip Code: <input type=" text" name="txtZipCode" value=""
     /><br />
     Phone: <input type="text" name="txtPhone" value="" />
     <br />
     E-mail: <input type="text" name="txtEmail" value=""/></p>
     <p><input type="submit" value="Save Customer Info" /></p>
</form>
<div id="divStatus"></div>

توجه کنید که رخدادonsubmit نوع فراخوانی تابع )(sendRequest را تغییر داده است. )همچنین مقدار false را برمی گرداند تا از هرگونه submit واقعی صفحه جلوگیری کند.( این متد ابتدا داده ها را برای درخواست POST آماده می کند سپس شی XMLHttp را برای ارسال آن آماده می سازد. اطلاعات

بایستی با فرمت رشته ای زیر ارسال شوند:

name1=value1&name2=value2&name3=value3

name و value ها برای هر پارامتر بایستی به صورت URL رمزگذاری شوند تا در مدت انتقال از، از بین رفتن داده ها ممانعت شود. جاوااسکرپت یک تابع داخلی با نام )(encodeURIComponent برای این منظور

 تدارک دیده است. برای ایجاد این رشته بایستی استخراج و رمزگذاری name و value را روی فیلدهای فرم

تکرار کنید. تابع )(getRequestBody این کار را انجام می دهد:

}

return aParams.join("&");

}
این تابع فرض را بر این می گذارد که شما یک ارجاع به فرم از طریق یک آرگومان خواهید داشت)oForm(.

یک آرایه )aParams(برای ذخیره جفت مقدار name-value ایجاد می شود. سپس المنتهای Form در یک حلقه قرار گرفته، یک رشته ایجاد و درsParam ذخیره می شوند، که سپس در یک آرایه قرار می گیرند. انجام این عملیات، در برخی مرورگرها ممکن است کند باشد. آخرین مرحله فراخوانی )(join در آرایه است برای برگرداندن داده ها است. این دستور بین جفت مقادیرname-value یک امپرسند “&” قرار

داده و یک رشته با فرمت صحیح ایجاد می کند. تابع )(sendRequest تابع )(getRequestBody را فراخوانی می کند و درخواست را تنظیم می کند:

function getRequestBody(oForm) {
var aParams = new Array();
for (var i=0 ; i < oForm.elements.length; i++) {
var sParam = encodeURIComponent(oForm.elements[i].name);
sParam += "=";
sParam += encodeURIComponent(oForm.elements[i].value);
aParams.push(sParam);
function sendRequest() {
var oForm = document.forms[0];
var sBody = getRequestBody(oForm);
var oXmlHttp = createXMLHttp();
oXmlHttp.open("post", oForm.action, true);

} }

}

oXmlHttp.setRequestHeader("Content-Type", "application/x-
www-form-urlencoded");
oXmlHttp.onreadystatechange = function () {
if (oXmlHttp.readyState == 4) {
if (oXmlHttp.status == 200) {

} else {

saveResult(oXmlHttp.responseText);
saveResult("An error occurred: "+

;}

oXmlHttp.statusText);
oXmlHttp.send(sBody);

 

همانند مثال قبلی، مرحله اول دراین تابع ایجاد یک فرم و ذخیره آن در متغیر )oForm( است که پس از ایجاد بدنه درخواست، در sBody ذخیره می شود. مرحله بعد ایجاد یک شی XMLHTTP است. توجه کنید که در متد open آرگومان اولی به جای POST ،GET می باشد، هچنین آرگومان دوم باoForm.action مقداردهی می شود. هچنین Header درخواست نیز تنظیم شده است. هنگامی که یک فرم از مرورگر به سرور ارسال می شود، نوع محتوای درخواست آن با application/x-www-form-urlencoded مقداردهی می شود. اکثر زبانهای تحت سرور در درخواست های POST به این کد توجه می کند، بنابراین این دستور از اهمیت خاصی برخوردار است.رخداد onreadystatechange تابع )(saveResult را

فراخوانی می کند:

}
این تابع وظیفه نمایش اطلاعات مشتری و یا پیغام خطا را دارد خط آخر بسیار مهم است، sBody به تابع send

پاس داده می شود که بعد جزئی از درخواست می شود.

0/5 ( 0 بازدید )

دیدگاه مشتریان

جزئیات مطلب

تاریخ انتشار:
۹۷,۰۲,۱۵
برچسب ها

مطالب مرتبط

جدیدترین محتوا های وبلاگ را از این به بعد به صورت پادکست گوش دهیدشروع
+ +
Top