[সঙ্গীত বাজাচ্ছি] ডগ লয়েড: তাই আরও একটি ধারণা সাজানোর যে সাজানোর এর ছাতা অধীনে পড়ে জাভাস্ক্রিপ্ট AJAX এর কিছু বলা হয়. এ সময় পর্যন্ত আমাদের জাভাস্ক্রিপ্ট দিয়ে মিথস্ক্রিয়া সঙ্কটকালে সীমাবদ্ধ হয়েছে বাটন এবং কিছু ঘটে. এবং বিশেষভাবে, এরকম কিছু আমাদের ওয়েবসাইট দেখুন এবং পরিবর্তন মনে হয়. রাইট? বিশেষ করে ভালো লেগেছে, এ ডকুমেন্ট অবজেক্ট মডেল ভিডিও, আমি পটভূমির রঙ পরিবর্তন. আমি তা-ই করেছিলেন কিন্তু যখন, আমি না কোন অতিরিক্ত বিশেষ অনুরোধ করতে. আমি যে অনুরোধ করতে হত না সার্ভার সম্পর্কে একটি নতুন পৃষ্ঠা পাঠাতে. আমি শুধু আমি ইতিমধ্যে ছিল কি পরিবর্তন. আমি আমার পৃষ্ঠাটি পুনরায় লোড করা আছে কি না এবং কিছু স্পষ্টভাবে পরিবর্তন তাই দারুণ. কিন্তু স্পষ্টভাবে আছে কিছু ম্যানুয়াল ব্যবহারকারী মিথস্ক্রিয়া জড়িত. AJAX এর পারবেন যে একটি শীতল কৌশল আমাদের একটি পৃষ্ঠার বিষয়বস্তু আপডেট করতে, এবং শুধুমাত্র চেহারা এবং পুনরায় লোড না করে, মনে. 

আর যখন বিশেষভাবে করে আমি একটি পৃষ্ঠা এর বিষয়বস্তু আপডেট বলে, আমি মনে করি আমরা পুনর্লিখন বলছে না জাভাস্ক্রিপ্ট ব্যবহার করে পাতা. আমি মনে করি আমরা আসলে অনুরোধ বলার অপেক্ষা রাখে না সার্ভার থেকে আরো তথ্য আমাদের পৃষ্ঠাটি পুনরায় লোড না করেও. 

একটি বিট এখন যে সাজান একটি আরো উন্নত কৌশল আমরা কথা বলতে যাচ্ছেন যে এই ভিডিওটি সম্পর্কে. আমরা কিছু মিথস্ক্রিয়া আছে চলুন. কিন্তু যখন আমরা, আমি হতে যাচ্ছি ওয়েব সার্ভারে অনুরোধের উপার্জন. এই ক্ষেত্রে, শুধু কি আমার Apache ওয়েব সার্ভার চলমান. আমি অতিরিক্ত উপার্জন করা যাচ্ছে না অনুরোধ আমি একটি ওয়েব পৃষ্ঠা পরিদর্শন করছি, যখন কিন্তু আমার পৃষ্ঠাটি রিফ্রেশ করা হবে না. 

এটা শুধু যাচ্ছে অ্যাসিঙ্ক্রোনাস আমার পাতা আপডেট. আর যে, আসলে, আমি কি আয়াক্সে যা দাঁড়িয়েছে, অ্যাসিঙ্ক্রোনাস জাভাস্ক্রিপ্ট এবং XML হয়. এক্সএমএল মার্কআপ অন্য ধরনের ভাষা, এবং আপনাকে বাছাই করতে পারেন শুধু এইচটিএমএল মত মনে করি. এটা পুরোপুরি একই জিনিস না কিন্তু এটি মূলত শুধু একটি মার্কআপ ভাষা. সুতরাং এটি একটি দ্রুত বিন্যস্ত এর জাভাস্ক্রিপ্ট এবং একটি মার্কআপ ভাষা. 

তাই এই ব্যবহার করার জন্য AJAX এর technique-- AJAX এর একটি পৃথক প্রোগ্রামিং ভাষা নয়. এটা একটা মাত্র সাজানোর techniques-- আমরা সংকলন একটি বিশেষ তৈরি করা প্রয়োজন জাভাস্ক্রিপ্ট অবজেক্ট, যা একটি XMLHttpRequest- এর বলা হয়. এখন, এই কাজ করা খুব সহজ. আমরা শুধু বলতে Var, যাই হোক না কেন আমরা এই বস্তুর সাথে যোগাযোগ করতে চান, নতুন XMLHttpRequest- এর সমান. আর এখন আমরা এখন লাভ করেছি বস্তুর একটি AJAX সাজান, অথবা একটি XMLHttpRequest- এর অনুমতি দেবে, যা বস্তুর, আমাদের দ্বারা অ্যাসিঙ্ক্রোনাস আমাদের পাতা আপডেট করা. 

আমরা এই নতুন অর্জিত পরে বস্তু, এই XMLHttpRequest- এর, আমরা কিছু করতে হবে তার onreadystatechange আচরণ. Onreadystatechange আচরণ সত্যিই ঠিক হয় আপনি একটি অনুরোধ করতে যখন একটি ওয়েব পাতা, পাতা ধাপের একটি নম্বর দিয়ে যায়. প্রথমত, একটি অনুরোধ পাঠানো হয় নি. তারপর, অনুরোধ করা হয়েছে পাঠানো হয়েছে, কিন্তু সে অনুপাতে কাজ না. তারপর অনুরোধের ভিত্তিতে অভিনীত হয়েছে. তারপর অনুরোধ আপনি ফেরত পাঠানো হচ্ছে. 

তারপর, অনুরোধ সম্পূর্ণরূপে আপনার পৃষ্ঠায় লোড. যারা বিভিন্ন যুক্তরাষ্ট্র হয়. আর তাই আমরা আমাদের সেট প্রয়োজন নতুন XMLHttpRequest- এর অবজেক্ট যখন প্রস্তুত রাষ্ট্র পরিবর্তন পরিবর্তন. আর সাধারণত, আমরা এই না একটি বেনামী ফাংশন, সংজ্ঞা যা আমরা থেকে সাথে পরিচিত হন এখন দয়া করে জাভাস্ক্রিপ্ট, যে যখন প্রস্তুত রাষ্ট্র পরিবর্তন বলা হয়. এটা যে সত্যিই না অনেক কিছু আছে. আমরা শুধু একটি সংজ্ঞা হতে যাচ্ছেন বেনামী ফাংশন, সাজানোর মত কি আমরা এরকম হয় জাভাস্ক্রিপ্ট, যেখানে আমরা একটি বেনামী ফাংশন আছে ক্লিক করলে একটি সাড়া, বা আমরা একটা ম্যাপ করছিলে যখন একটি অ্যারের মধ্যে বিভিন্ন বস্তুর. 

কিছু যখন ঘটে কিছু ক্লিক করা হয়. এই ক্ষেত্রে, এটা শুধু কিছু হয় ঘটছে যখন আমাদের পৃষ্ঠার রাষ্ট্র পরিবর্তন. দুই অন্যান্য বৈশিষ্ট্য আছে সাজান র তারা পারব না হয় যে হয় শুধুমাত্র বৈশিষ্ট্য XMLHttpRequest- এর সহজাত, কিন্তু তারা বেশ গুরুত্বপূর্ণ বেশী. ReadyState কিছু বলা আছে, যা সম্ভবত আপনি অনুমান করতে পারেন, যেমন onreadystatechange এর সাথে সম্পর্কিত হয়. এটা আসলে আপনি বলে readyState কি. 0, 1, 2, 3, এবং 4 হয় সেখানে সম্ভাবনার, এবং তারা ধরণের প্রায় মিলা কি আমি শুধু এই একটি দ্বিতীয় আগে কথা বলা হয়েছিল. 

এবং তারপর অবস্থা, যা আশা সবকিছু ঠিক হয়ে গিয়েছিলাম, স্বল্প, যা 200 জন্য, অবশ্যই, ঠিক আছে, আমরা HTTP থেকে সাথে পরিচিত হন, যা. তাই আমরা আশা করছি যে আমাদের জন্য প্রস্তুত রাষ্ট্র চার হয়, এবং আমাদের অবস্থা 200 হয়. আর আমাদের জন্য প্রস্তুত রাষ্ট্র যদি চার, এবং প্রতিক্রিয়া আরোপ করা হতে প্রস্তুত পাতা, এবং অবস্থা 200, আমরা যা করতে পেরেছি সবকিছু সফলভাবে, এখন আমরা অ্যাসিঙ্ক্রোনাস পারেন আমাদের পাতা আপডেট পুনরায় লোড না করেও এটা সমগ্র বিষয়বস্তু. 

আমরা কি সংজ্ঞায়িত করেছি onreadystatechange আচরণের, এবং আমরা যে চেক করেছি readyState , 4 এবং অবস্থা 200 তারপর আমরা সব করতে প্রয়োজন হয় একটি অ্যাসিঙ্ক্রোনাস খুলুন অনুরোধ, শুধু যা করছে একটি HTTP সাধারণত অনুরোধ পেতে. শুধু প্রোগ্রামের মাধ্যমে এরকম, পরিবর্তে আমাদের ওয়েব ব্রাউজারের মাধ্যমে এর. এবং তারপর আমরা যে অনুরোধ পাঠাতে. তাই কি হতে পারে এই আছে প্রেক্ষাপটে অনুরূপ? তাই এখানে একটি ফাংশন যে Ajax অনুরোধ সঙ্গে প্রতিষ্ঠান. ঠিক আছে? এবং আমি ইচ্ছামত বলেন করেছি এটি একটি যুক্তি গ্রহণ করে. আর এই একটি কেমন এখানে সাধারণ কঙ্কাল. খুব শুরুতে আমরা পেতে নিজেদেরকে একটি নতুন XMLHttpRequest- এর অবজেক্ট. তারপর, আমি সেট করতে হবে onreadystatechange আচরণ. আর তাই আমি বলতে যাচ্ছি যখন readyState পরিবর্তন, আমি যদি এই ফাংশন কল করতে চান. 

জিজ্ঞাসা যাচ্ছে যা প্রশ্ন, readyState যদি readyState পরিবর্তিত হয়েছে, 4 4 হতে, এবং অবস্থা 200 ছিল, তাই আমরা আমি একটি সফল অনুরোধ ছিল পাতা কিছু করতে চাই. আর আমরা দেখে নেব একটি উদাহরণ এ কি কিছু যে একটি দ্বিতীয় মধ্যে হতে পারে. আমি তখন, এখন আমি সংজ্ঞায়িত আছে আমার বেনামী ফাংশন, আমার প্রতিক্রিয়া ফাংশন যখনই readyState পরিবর্তন. 

আমি তখন মাত্র খোলার প্রয়োজন ওপেন পদ্ধতি ব্যবহার করে, অনুরোধ. এবং তারপর, আমি যে অনুরোধ পাঠাতে. আর এর কটাক্ষপাত করা যাক আরো একটি কংক্রিট উদাহরণ কি এর AJAX আমাদের ওয়েব পেজের মধ্যে নির্বাচন করতে পারবেন. তাই আমি এখানে একটি খুব সহজ আছে পাতা home.html বলা. আর আমি একটি তথ্য যায় পেয়েছেন এখানে এবং ড্রপ-ডাউন মেনু কিছু বাছাই. 

আর আমরা এক সেকেন্ডের মধ্যে এই পরিদর্শন করব. কিন্তু আমি মনে করি আমরা এখন একটি গ্রহণ করা উচিত প্রকৃত সোর্স কোড তাকান. আর তাই, আমি home.html আপ খুলতে যাচ্ছি. আর আমরা কি ঘটছে তা দেখতে পাবে. এখানে খুব উপরের আপ সুতরাং, আমি আছে ঘটছে যে কিছু করে জাভাস্ক্রিপ্ট কাপড়. 

এবং এখানে, আমি দৃশ্যত আছে যার আইডি infodiv হয় একটি div, এবং কিছু তথ্য সেখানে যেতে যাচ্ছে. এবং তারপর আমি এই ফর্ম আছে. আর এই ভেতরে ফর্ম, আমি কিছু আছে একটি নির্বাচন করুন, যার নাম দেওয়া হয় শুধু একটি ড্রপ-ডাউন মেনু বিভিন্ন বিকল্প একটি গুচ্ছ সঙ্গে. আর যে, যখন পরিবর্তন স্পষ্টত নির্বাচিত করা হয়েছে যে বিকল্প আছে পরিবর্তন, আমি ফোন করতে যাচ্ছি কিছু ফাংশন cs50Info, এবং তারপর আমি যাচ্ছি this.value পাস, যেখানে এই বোঝায় যা অপশনটি নির্বাচন করা হয়, এবং মান, এখানে বিকল্প এই এক মূল্য = সমান ফাঁকা, "Blumberg," "বাউডেন," "চ্যান," এবং "MALAN." 

তাই কি আসলে প্রতাপ আমি এই কাজ করতে হলে এখানে ঘটতে? ওয়েল, এর একটি নিতে দিন blumberg.html তাকান. এটা শুধু একটা মনে হচ্ছে কিছু html স্নিপেট. এবং বাস্তবিকই, আমি কি আশা করছি এখানে ঘটতে যাচ্ছে আমি প্লাগ পাবে যাচ্ছেন না আমার ওয়েব পৃষ্ঠার মধ্যে সরাসরি এই এইচটিএমএল পুনরায় লোড না করেও পাতা, যেমন যে সময় আমি ড্রপ ডাউন থেকে হানা নিন মেনু, হানা সম্পর্কিত তথ্য, বিশেষ করে, এই তথ্য এখানে blumberg.html মধ্যে, পেজে দেখায় কি. আর আমি রিফ্রেশ করতে হবে না. তখন আমি বললাম, অন্য কারো যদি রাজনীতি করতে তাদের তথ্য দেখাবে. আমি এটা কিভাবে করবো? আবার, এই প্রয়োজন আমাদের কিছু AJAX ব্যবহার করতে. আর তাই, আমরা ajax.js. খুলুন করব আর এখানে, cs50Info যে ফাংশন. নাম কিছুই হয়, তাহলে আমি আসতে. আমি যদি কিছু করতে যাচ্ছি না খালি বিকল্প নির্বাচিত করা হয়েছে. অন্যথা, আমি যাচ্ছি একটি নতুন XMLHttpRequest- এর তৈরি. এবং তারপর আমি যখন বলতে যাচ্ছি readyState পরিবর্তন, এই ফাংশন কল. 

আর readyState হয় তাহলে 4 এবং অবস্থা 200, এখানে একটি সামান্য বিট লাইন 13 jQuery এর. কিন্তু আমি বলার অপেক্ষা রাখে না করছি সব, infodiv বিষয়বস্তু পরিবর্তন আমি একটি হিসাবে ফিরে পেয়েছিলাম যাই হোক না কেন হতে আমার HttpRequest প্রতিক্রিয়াতে. 

আমার HttpRequest কি? ওয়েল, ঠিক যে এখানে লাইন 18 এবং 19. লাইন 18, আমি মূলত প্রস্তুত করছি একটি নাম '.html জন্য অনুরোধ পেতে. এবং আবার, নাম এইখানে ছিল যে যুক্তি cs50Info প্যারামিটার হিসেবে গৃহীত. 

তাই মূলত, আমি কারো কথা প্রসঙ্গে করছি অপশনের যে সেট ছিল, নাম আমরা দেখেছি যে ড্রপ-ডাউন মেনু আকারে. আমি যে নাম পেয়ে করছি. আর আমি আপনাকে চাই বলার অপেক্ষা রাখে না আমার জন্য যে file.html প্রাপ্ত দয়া, এবং তারপর যে অনুরোধ পাঠাতে. 

আর তাই যে onreadystatechange যাচ্ছে শোনা এবং অপেক্ষা এবং অপেক্ষা করা এবং readyState পর্যন্ত, অপেক্ষা 4 হয়, এবং অবস্থা 200 হয়. সুতরাং এটা, পরিসেবা উপলব্ধ করা প্রস্তুত এবং অনুরোধ সফল হয়েছে. আর যদি তাই হয় তাহলে, এটি যাচ্ছে infodiv বিষয়বস্তু পরিবর্তন আমি ফিরে পেয়েছিলাম যে প্রতিক্রিয়া টেক্সট হতে. 

সুতরাং আসুন কিভাবে এই দেখতে দিন আসলে কাজ করতে পারে. তাই আমরা যখন নিজের ব্রাউজার ওভার আগাইয়া করব উইন্ডো, এবং আমরা এখানে তাকান করব. সুতরাং আসুন কটাক্ষপাত করা যাক কি AJAX মধ্যে এখানে ঘটছে. তাই আমরা কারো চয়ন করব ড্রপ-ডাউন মেনু থেকে. তাই এই ক্ষেত্রে, যাক শুধু হানা নিন. এবং খেয়াল করুন যে হান্নার তথ্য পরিবর্তিত হয়েছে, কিন্তু আমি any-- আছে না আমার পৃষ্ঠাটি পুনরায় লোড করা হয়নি. স্টাফ থাকুন. পণ্যদ্রব্য সবচেয়ে থাকুন. AJAX এর টেস্ট পরিবর্তন করা হয়নি. বাটন নিজেই, এই ড্রপ-ডাউন মেনু পরিবর্তন করা হয়নি. কিন্তু তথ্য আছে পরিবর্তন হয়নি. আর তার উপর নির্ভর করে দ্রুত আমার কম্পিউটার প্যাচসমূহ, আপনি আসলে কন্টেন্ট দেখতে পারে disappears এবং তারপর সত্যিই reappears দ্রুত. হচ্ছে যে কন্টেন্ট infodiv থেকে মুছে ফেলা, এবং তারপর একটি দিয়ে প্রতিস্থাপিত নতুন অ্যাসিঙ্ক্রোনাস অনুরোধ. 

আমি বলতে হবে এটি সুইচ যদি তাই, Rob-- এবং আবার দেখব, এবং হয়তো আমরা আসলে এটা দেখতে পাবেন অদৃশ্য এবং দ্রুত পুনরাবির্ভূত. আপনি যে দেখতে? কিভাবে এটা ঠিক, দূরে ভেসে এবং তারপর এটি refilled? যে Ajax অনুরোধ স্থান গ্রহণ সাজান. আর তাই তার উপর নির্ভর করে ব্যক্তি আমি নই, চয়ন একটি ভিন্ন অ্যাসিঙ্ক্রোনাস উপার্জন একটি ভিন্ন ফাইলে অনুরোধ আমি আমার সার্ভারে আছে. আর বিষয়বস্তু আমার infodiv আপডেট করা হয়, আমি নির্বাচিত করেছি এর মধ্যে কোনটি উপর ভিত্তি করে. সুতরাং যে সত্যিই সব AJAX আছে এর. এটা আমাদের এই অ্যাসিঙ্ক্রোনাস করতে পারবেন অনুরোধ, একটি পাতা আপডেট. করেও সমগ্র পৃষ্ঠাটি রিফ্রেশ, আমরা নতুন পেতে যাচ্ছেন উপার্জন করে তা থেকে কন্টেন্ট সার্ভারে একটি নতুন তাজা অনুরোধ. আর তাই, আমাদের পেজ হতে পারে বেশ কিছুটা গতিশীল. 

আর আমরা আরো পেতে হিসাবে এবং আরো উন্নত, আপনি ভালো জিনিস পেতে পারে বলুন, আপনার ইমেইল ইনবক্সে, যেখানে আপনি কিছু করতে হবে না. আপনার একটি ক্লিক করতে হবে না ডাউন মেনু ড্রপ বা কিছু ক্লিক করুন, এবং হঠাৎ সব, আপনার নতুন ইমেইল উপরের আপ দেখায়. যে এছাড়াও শুধু একটি Ajax অনুরোধ. এজাক্স চাইছে আপনার সার্ভার, ইমেইল সার্ভার, সব তথ্য পাঠাতে সক্ষম আপনার সর্বশেষ ইমেল সম্পর্কে, এবং আপনি দেখতে কি পরিবর্তন পর্দার ইমেইলের আপনার নতুন সেট করা. এবং আপনি একটি নতুন এক আছে যে div আছে, তারপর কন্টেন্ট প্রতিফলিত পরিবর্তন হবে আপডেট কন্টেন্ট. আমি ডগ লয়েড আছি. এটি CS50.