[સંગીત વગાડવાનો] ડો LLOYD: તેથી વધુ એક કલ્પના સૉર્ટ કે પ્રકારની ના છત્ર હેઠળ પડે છે જાવાસ્ક્રિપ્ટ એજેક્સ કહેવાય કંઈક છે. આ બિંદુ સુધી, અમારા જાવાસ્ક્રિપ્ટ સાથે ક્રિયાપ્રતિક્રિયા એક પુશ મર્યાદિત કરવામાં આવી છે બટન અને કંઈક બને છે. અને ખાસ કરીને, થાય છે કે જે કંઈક અમારા વેબસાઇટ્સ જોવા અને ફેરફારો લાગે છે. અધિકાર? ખાસ કરીને જેમ, માં ડોક્યુમેન્ટ ઓબ્જેક્ટ મોડેલ વિડિઓ, હું પૃષ્ઠભૂમિ રંગ બદલાય છે. હું તે કર્યું ત્યારે, હું ન હતી કોઇ ખાસ વધારાની અરજીઓ કરવા માટે. મને લાગે છે કે વિનંતી ન હતી સર્વર મને એક નવું પાનું મોકલો. હું માત્ર હું પહેલેથી જ શું બદલ્યો છે. હું મારા પૃષ્ઠને ફરીથી લોડ કરવાની જરૂર ન હતી અને વસ્તુઓ ચોક્કસપણે બદલાયેલ જેથી તે મહાન છે. પરંતુ ત્યાં ચોક્કસપણે કેટલાક જાતે વપરાશકર્તા ક્રિયાપ્રતિક્રિયા સમાવેશ થાય છે. AJAX પરવાનગી આપે છે કે જે ઠંડી ટેકનિક છે અમને પૃષ્ઠની સામગ્રી અપડેટ કરવા માટે, અને માત્ર દેખાવ અને ફરીથી લોડ કર્યા વગર લાગે છે. 

અને જ્યારે ખાસ કરીને હું એક પૃષ્ઠની સામગ્રી અપડેટ કહે છે, હું અમે ફરીથી લખી કહી રહ્યો છું જાવાસ્ક્રિપ્ટ ઉપયોગ કરીને આ પાનું. હું અમે ખરેખર વિનંતી કહી રહ્યો છું સર્વર માંથી વધુ માહિતી અમારા પૃષ્ઠને ફરીથી લોડ કર્યા વગર. 

એક બીટ હવે સૉર્ટ વધુ આધુનિક ટેકનિક અમે વાત કરવા જઈ રહ્યાં છો કે જે આ વિડિઓ માં વિશે. અમે કેટલાક ક્રિયાપ્રતિક્રિયા હોય રહ્યા છીએ. પરંતુ જ્યારે અમે, હું જાઉં છું વેબ સર્વર અરજીઓ બનાવે છે. આ કિસ્સામાં, માત્ર શું છે મારા અપાચે વેબ સર્વર ચાલી રહ્યું છે. હું વધારાના કરી જાઉં છું અરજીઓ હું એક વેબ પૃષ્ઠની મુલાકાત છું, જ્યારે પરંતુ મારા પાનું તાજું નહીં. 

તે માત્ર રહ્યું છે અસુમેળ મારા પાનું અપડેટ. અને તે, હકીકતમાં, છે AJAX માટે વપરાય છે, અસુમેળ જાવાસ્ક્રિપ્ટ અને XML છે. XML માર્કઅપ અન્ય પ્રકારનું છે ભાષા, અને તમે સૉર્ટ કરી શકો છો માત્ર HTML જેમ તે લાગે છે. તે ખૂબ જ વસ્તુ નથી, પરંતુ તે મૂળભૂત રીતે માત્ર એક માર્કઅપ ભાષા છે. તેથી તે એક સિંક્રનસ છે જાવાસ્ક્રિપ્ટ અને એક માર્કઅપ ભાષા. 

તેથી આ ઉપયોગ કરવા માટે AJAX technique-- AJAX એક અલગ પ્રોગ્રામીંગ ભાષા નથી. તે માત્ર પ્રકારની છે techniques-- અમે સમૂહ ખાસ બનાવવાની જરૂર છે જાવાસ્ક્રિપ્ટ પદાર્થ, જે એક XMLHttp માગણી કહેવામાં આવે છે. હવે, તે આ કરવા માટે ખૂબ જ સરળ છે. અમે હમણાં જ કહે છે var, ગમે અમે આ પદાર્થ કૉલ કરવા માંગો છો, નવા XMLHttp માગણી સમકક્ષ હોય છે. અને હવે અમે હવે મેળવી છે પદાર્થ એક એજેક્સ સૉર્ટ કરો, અથવા XMLHttp માગણી પરવાનગી આપે છે કે જે પદાર્થ, અમને અસુમેળ અમારા પાનું અપડેટ કરવા માટે. 

અમે આ નવી મેળવેલ છે પછી પદાર્થ, આ XMLHttp માગણી, અમે કંઈક કરવા માટે હોય છે તેના onreadystatechange વર્તન. Onreadystatechange વર્તન ખરેખર માત્ર છે તમે વિનંતી કરો ત્યારે એક વેબ પૃષ્ઠ પર, પૃષ્ઠ પગલાંઓની સંખ્યા મારફતે જાય છે. પ્રથમ, એક વિનંતિ મોકલવામાં આવી નથી. પછી, વિનંતી કરવામાં આવી છે મોકલવામાં આવે છે, પરંતુ પર કામ કર્યું નથી. પછી વિનંતી પર કામ કર્યું કરવામાં આવ્યું છે. પછી વિનંતી છે તમને પાછા મોકલવામાં આવી રહી છે. 

પછી, વિનંતી છે સંપૂર્ણપણે તમારા પૃષ્ઠ લોડ. તે વિવિધ રાજ્યો છે. અને તેથી અમે અમારી સુયોજિત કરવાની જરૂર છે નવા XMLHttp માગણી પદાર્થ જ્યારે તૈયાર રાજ્ય ફેરફારો બદલવા માટે. અને સામાન્ય રીતે, અમે આ કરી એક અનામી કાર્ય, વ્યાખ્યાયિત જે અમે માંથી પરિચિત છો હવે જાવાસ્ક્રિપ્ટ, કે જ્યારે તૈયાર રાજ્ય ફેરફારો કહેવામાં આવે છે. તે કરતાં ખરેખર ખૂબ વધુ છે. અમે માત્ર એક વ્યાખ્યાયિત કરી રહ્યા છીએ અનામી કાર્ય સૉર્ટ કરો શું ગમે છે તે અમે કરી રહ્યા હતા જાવાસ્ક્રિપ્ટ, જ્યાં અમે કરશે એક અનામી કાર્ય છે ક્લિક પર એક પ્રતિભાવ, અથવા આપણે એક નકશો કરી રહ્યા હતા ત્યારે એક એરે માં વિવિધ પદાર્થો. 

કંઈક થયું ત્યારે કંઈક ક્લિક કરવામાં આવી હતી. આ કિસ્સામાં, તે માત્ર કંઈક છે છે શું થઈ રહ્યું છે ત્યારે અમારા પાનું રાજ્ય ફેરફારો. અન્ય બે આવાસ છે જેવું તેઓ નથી કરવામાં આવે છે કે છે કે જે આ જ ગુણધર્મો XMLHttp માગણી માટે સહજ, પરંતુ તેઓ ખૂબ મહત્વના મુદ્દાઓ છો. ReadyState કહેવાય કંઈક છે, જે તમે કદાચ ધારી શકો, onreadystatechange સાથે સંબંધિત છે. તે ખરેખર તમને કહે છે આ readyState શું છે. 0, 1, 2, 3, અને 4 છે ત્યાં શક્યતાઓ અને તેઓ સૉર્ટ આશરે અનુલક્ષે શું હું માત્ર એક સેકંડ પહેલા અંગે વાત કરી હતી. 

અને પછી સ્થિતિ, જે આસ્થાપૂર્વક બધું ઠીક ગયા હોય, ટૂંકા હોય છે, જે 200 છે માટે, અલબત્ત, ઠીક છે, અમે HTTP માંથી પરિચિત છો છે. તેથી અમે આશા કરી રહ્યા છીએ કે અમારા તૈયાર રાજ્ય ચાર છે, અને અમારી સ્થિતિ 200 છે. અને અમારા તૈયાર રાજ્ય તો ચાર, અને જવાબ છે પર મૂકી શકાય કરવા માટે તૈયાર છે પાનું, અને સ્થિતિ 200 છે, અમે કરવા માટે સમર્થ હતા બધું સફળતાપૂર્વક હવે અમે અસુમેળ કરી શકો છો અમારા પાનું અપડેટ ફરીથી લોડ કર્યા વગર તે સમગ્ર સામગ્રી. 

અમે શું થાય છે તે વ્યાખ્યાયિત કર્યું પછી આ onreadystatechange વર્તન, અને અમે તે ચકાસાયેલ છે readyState 4 અને સ્થિતિ 200 પછી અમે શું કરવાની જરૂર બધા છે એક સિંક્રનસ ખોલો વિનંતી, માત્ર જે બનાવે છે એ HTTP સામાન્ય વિનંતી મળી. જસ્ટ પ્રોગ્રામ તે કરી, તેના બદલે અમારી વેબ બ્રાઉઝર મારફતે છે. અને પછી અમે તે વિનંતી મોકલી. તેથી શું કદાચ આ કરે છે સંદર્ભમાં જેમ દેખાય છે? તેથી અહીં એક કાર્ય છે કે એજેક્સ વિનંતીઓ સાથે વહેવાર. ઠીક છે? અને હું આપખુદ જણાવ્યું હતું કે કર્યું તે એક દલીલ સ્વીકારે છે. અને આ એક એક પ્રકારના અહીં સામાન્ય હાડપિંજર. ખૂબ શરૂઆતમાં, અમે વિચાર જાતને એક નવી XMLHttp માગણી ઓબ્જેક્ટ. પછી, હું સુયોજિત કરવાની જરૂર છે onreadystatechange વર્તન. અને તેથી હું કહેવા જાઉં છું જ્યારે readyState ફેરફારો હું તમને આ કાર્ય કૉલ કરવા માંગો છો. 

આ પૂછી રહ્યું છે પ્રશ્ન readyState તો આ readyState બદલાઈ ગયેલ છે, તો 4 4, અને સ્થિતિ 200 હતી, તેથી અમે હું એક સફળ વિનંતી કરી હતી આ પૃષ્ઠ પર કંઈક કરવા માંગો છો. અને અમે એક નજર પડશે એક ઉદાહરણ શું કંઈક કે જે બીજા હોઈ શકે છે. તેથી, હવે હું વ્યાખ્યાયિત કરે છે મારા અનામી કાર્ય, મારા પ્રતિભાવ કાર્ય જ્યારે આ readyState ફેરફારો. 

તેથી પછી હું માત્ર એક ખોલવા માટે જરૂર છે ઓપન પદ્ધતિનો ઉપયોગ કરીને, વિનંતી છે. અને પછી, હું કે વિનંતી મોકલી. અને ચાલો એક નજર કરીએ વધુ નક્કર ઉદાહરણ શું AJAX અમારી વેબ પૃષ્ઠો પર કરી શકો છો. તેથી હું અહીં એક ખૂબ જ સરળ હોય છે પાનું home.html કહેવાય છે. અને હું એક માહિતી જાય મળી છે અહીં અને ડ્રોપ ડાઉન મેનુ અમુક પ્રકારની. 

અને અમે એક બીજા આ ફોટાઓની પડશે. પરંતુ હું અમે હવે એક લેવી જોઈએ લાગે છે વાસ્તવિક સ્ત્રોત કોડ જુઓ. અને તેથી, હું home.html ખોલવા માટે જઇ રહ્યો છું. અને અમે પર ચાલી રહ્યું છે તે જોવા મળશે. અહીં ખૂબ જ ટોચ પર જેથી, હું રહ્યું છે કે કેટલાક જાવાસ્ક્રિપ્ટ સામગ્રી. 

અને અહીં, હું દેખીતી રીતે છે જેની આઈડી infodiv છે DIV, અને કેટલીક માહિતી ત્યાં જવા માટે ચાલે છે. અને પછી હું આ સ્વરૂપ છે. અને આ અંદર ફોર્મ, હું કંઈક હોય એક પસંદ કરો, કહેવાય જે માત્ર એક ડ્રોપ ડાઉન મેનુ છે વિવિધ વિકલ્પો એક ટોળું સાથે. અને તે, બદલે છે જ્યારે દેખીતી રીતે જ્યારે પસંદ કરવામાં આવી છે કે વિકલ્પ છે બદલી, હું કહી જાઉં છું અમુક કાર્ય cs50Info, અને પછી હું જાઉં છું this.value પસાર કરવા માટે, આ તે છે જ્યાં ઉલ્લેખ કરે છે જે વિકલ્પ પસંદ કરવામાં આવી હતી, અને કિંમત, અહીં વિકલ્પ આ એક છે કિંમત = બરાબર ખાલી, "બ્લુમબર્ગ," "બોડેન", "ચાન," અને "MALAN." 

તેથી શું ખરેખર કદાચ હું આવું ત્યારે અહીં થાય છે? વેલ, એક લેવા દો blumberg.html જુઓ. તે માત્ર એક એવું લાગે છે કેટલાક એચટીએમએલ સ્નિપેટ. અને હકીકતમાં, હું શું આશા છું અહીં શું ચાલે છે હું પ્લગ સમક્ષ રજુ કરવાનો પ્રયત્ન કરવા માટે જઇ રહ્યો છું મારી વેબ પાનું સીધું આ HTML ફરીથી લોડ કર્યા વગર આ પાનું, કે જેથી જ્યારે હું ડ્રોપ ડાઉન માંથી હેન્નાહ પસંદ મેનુ, હેન્નાહ વિશે માહિતી ખાસ કરીને, આ જાણકારી અહીં blumberg.html માં, આ પાનાં પર બતાવે છે શું છે. અને હું તાજું કરવાની જરૂર નથી. અને હું બીજા કોઇની પસંદ કરો તો તેમની માહિતી બતાવવામાં આવશે. હું આ કેવી રીતે કરવું? ફરીથી, આ માટે જરૂરી છે અમને કેટલાક AJAX ઉપયોગ કરે છે. અને તેથી, અમે ajax.js. ખોલો પડશે અને અહીં, cs50Info કે કાર્ય છે. નામ કશું છે, હું આવો. હું તો કંઈ પણ કરવા માટે નથી જતા છું ખાલી વિકલ્પ પસંદ કરવામાં આવી છે. નહિંતર, હું જાઉં છું નવી XMLHttp માગણી બનાવો. અને પછી હું જ્યારે કહેવા જાઉં છું readyState ફેરફારો, આ કાર્ય કૉલ કરો. 

અને readyState છે જો 4 અને સ્થિતિ 200 છે, અહીં થોડી છે વાક્ય પર 13 jQuery છે. પરંતુ હું એવું કહેતા હોય છે કરી રહ્યો છું બધા infodiv સમાવિષ્ટો બદલી હું એક તરીકે પાછા મળી પ્રયત્ન ગમે મારા HttpRequest તરફથી પ્રતિભાવ. 

મારા HttpRequest શું છે? વેલ, તે સાચું છે અહીં લીટી 18 અને 19 પર. રેખા 18, હું મૂળભૂત તૈયાર છું નામ + .html માટે વિનંતી મળી. અને ફરી, નામ અહીં છે હતું કે દલીલ cs50Info કરવા માટે એક પરિમાણ તરીકે પસાર કર્યો હતો. 

તેથી મૂળભૂત રીતે, હું કોઈકને પસાર છું વિકલ્પો કે સમૂહ હતો, જે નામ અમે જોયું કે ડ્રૉપ-ડાઉન મેનુને સ્વરૂપ છે. મને લાગે છે કે નામ મેળવવામાં છું. અને હું તમે ઈચ્છો કહી રહ્યો છું મારા માટે કે file.html મેળવવા, કૃપા કરીને અને પછી તે વિનંતી મોકલી. 

અને જેથી onreadystatechange રહ્યું છે સાંભળી અને રાહ જોઈ અને રાહ હોઈ અને readyState સુધી રાહ 4 છે, અને સ્થિતિ 200 છે. તેથી તે સેવા આપવા માટે તૈયાર છે અને વિનંતી સફળ રહ્યો હતો. જો તે અને પછી, તે ચાલી રહ્યું છે infodiv સમાવિષ્ટો બદલી હું પાછા મળી કે પ્રતિભાવ લખાણ હોય છે. 

તેથી આપણે કેવી રીતે આ જોવા દો ખરેખર કામ કરી શકે છે. તેથી અમે મારું બ્રાઉઝર પર વડા પડશે વિન્ડો, અને અમે અહીં જોવા મળશે. તેથી આપણે એક નજર કરીએ શું એજેક્સ માં અહીં પર ચાલી રહ્યું છે. તેથી અમે કોઈકને પસંદ કરશો ડ્રોપ-ડાઉન મેનુમાંથી. તેથી આ કિસ્સામાં, ચાલો માત્ર હેન્નાહ પસંદ કરો. અને નોટિસ કે હેન્નાહ માહિતી બદલાઈ ગયેલ છે, પરંતુ હું any-- ન હતી મારા પાનું સંપૂર્ણપણે ફરીથી લોડ ન હતી. આ સામગ્રી રોકાયા. આ સામગ્રી મોટા ભાગના રહ્યા હતા. AJAX ટેસ્ટ બદલી ન હતી. આ બટન પોતે આ ડ્રૉપ-ડાઉન મેનુ બદલી ન હતી. પરંતુ માહિતી ત્યાં બદલવા હતી. અને કેવી રીતે તેના પર આધાર રાખીને ઝડપથી મારા કમ્પ્યુટર ચાલ, તમે ખરેખર સામગ્રી જોઈ શકે છે કે અદૃશ્ય થઈ જાય છે અને પછી ખરેખર ફરી દેખાય ઝડપથી. કે આવી સામગ્રી infodiv માંથી કાઢી, અને પછી એક સાથે બદલી નવા અસુમેળ વિનંતી. 

હું કહી શકાય સ્વિચ તેથી જો, Rob-- અને ફરી, એક નજર, અને કદાચ આપણે ખરેખર તે જોશો થઈ જાય છે અને ઝડપથી પુનઃ. તમે તે જોઈ? કેવી રીતે તે માત્ર દૂર પોપ અને પછી તે ફરીથી? તે AJAX વિનંતી છે થતી ક્રમમાં ગોઠવો. અને તેથી પર આધાર રાખીને વ્યક્તિ હું છું, પસંદ એક અલગ અસુમેળ બનાવે અલગ ફાઈલ માટે વિનંતી હું મારા સર્વર પર હોય છે. અને સમાવિષ્ટો મારા infodiv અપડેટ કરવામાં આવે છે, મેં પસંદ કર્યું આ જે પર આધારિત છે. તેથી તે ખરેખર બધા AJAX ત્યાં છે. તે અમને આ અસુમેળ બનાવવા માટે પરવાનગી આપે છે અરજીઓ, એક પાનું સુધારાઓ. કર્યા વગર સમગ્ર પાનું તાજું કરો, અમે નવી વિચાર જઈ રહ્યાં છો કરીને તે સામગ્રી સર્વર સાથે એક નવા તાજા વિનંતી. અને તેથી, અમારા પૃષ્ઠો બની શકે છે તદ્દન થોડી વધુ ગતિશીલ. 

અને અમે વધુ વિચાર અને વધુ આધુનિક, તમે જેવી વસ્તુઓ મેળવી શકે છે કહે છે, તમારા ઇમેઇલ ઇનબૉક્સ, જ્યાં તમે કંઈ પણ કરવા માટે નથી. તમે એક ક્લિક કરવાની જરૂર નથી ડાઉન મેનુ ડ્રોપ અથવા કંઈપણ ક્લિક કરો અને અચાનક બધા, તમારા નવા ઇમેઇલ ટોચ પર બતાવે છે. તે પણ માત્ર એક AJAX વિનંતી છે. એજેક્સ વિનંતી કરે છે તમારા સર્વર, ઇમેઇલ સર્વર, બધી માહિતી પર મોકલવા તમારા તાજેતરની ઇમેઇલ્સ વિશે અને તમે જુઓ શું બદલવા સ્ક્રીન ઇમેઇલ્સ તમારા નવા સુયોજિત કરવા માટે. અને તમે એક નવું હોય, તો કે DIV ત્યાં, પછી સામગ્રી અસર પહોંચાડવા માટે બદલાશે સુધારાયેલ સામગ્રી. હું ડો લોયડ છું. આ CS50 છે.