2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
AJAX इत्यस्य सम्पूर्णा प्रक्रिया Asynchronous JavaScript And XML अस्ति, यत् asynchronous JS and XML अस्ति । AJAX इत्यस्य माध्यमेन भवान् ब्राउजर् मध्ये सर्वरं प्रति अतुल्यकालिकं अनुरोधं प्रेषयितुं शक्नोति सर्वाधिकं लाभः : ताजगीं विना आँकडानां प्राप्तिः । AJAX नूतना प्रोग्रामिंगभाषा नास्ति, अपितु विद्यमानमानकानां एकत्र उपयोगस्य नूतनः मार्गः अस्ति ।
XML विस्तारयोग्य मार्कअप भाषा।
XML दत्तांशस्य प्रसारणाय, संग्रहणाय च विनिर्मितः अस्ति ।
XML HTML इत्यस्य सदृशम् अस्ति भेदः अस्ति यत् HTML मध्ये पूर्वनिर्धारितटैग्स् सन्ति, परन्तु XML मध्ये पूर्वनिर्धारितटैग्स् नास्ति ।
<student>
<name>John</name>
<age>18</age>
</student>
अधुना तस्य स्थाने JSON इति स्थापितं अस्ति ।
{"name":"John","age":18}
१) पृष्ठं ताजगीकृत्य सर्वरेण सह संवादं कर्तुं शक्नोति
२) उपयोक्तृघटनानां आधारेण पृष्ठसामग्रीणां भागं अद्यतनीकर्तुं शक्नोति
१) ब्राउजिंग् इतिहासः नास्ति, पुनः गन्तुं न शक्नोति
२) क्रॉस्-डोमेन समस्या (समानः उत्पत्तिः) अस्ति ।
३) SEO मैत्रीपूर्णं नास्ति (जालसामग्री क्रॉल कर्तुं न शक्यते)
HTTP (hypertext transport protocol) protocol [Hypertext Transfer Protocol], प्रोटोकॉल ब्राउजर् तथा World Wide Web server इत्येतयोः मध्ये संचारस्य नियमानाम् विवरणं ददाति ।
प्रारूपे, मापदण्डेषु च ध्यानं भवति
行 GET /s?ie=utf-8 HTTP/1.1
头 Host: atguigu.com
Cookie: name=guigu
Content-type: application/x-www-form-urlencoded
user-Agent: chrome 83
空行
体 username=admin&password=admin
行 HTTP/1.1 200 OK
头 Content-Type: text/html;charset=utf-8
Content-length: 2048
Content-encoding: gzip
空行
体 <html>
<head>
</head>
<body>
<h1>HHHHello</h1>
</body>
</html>
टीका:
GET अनुरोधं प्रेषयन्तु: पृष्ठपरीक्षायां संजालं उद्घाटयन्तु, पृष्ठं ताजगीं कुर्वन्तु, अनुरोधं प्रेषयन्तु, प्रतिक्रियां प्राप्नुवन्तु, तथा च शीर्षके Response Headers तथा Request Headers सन्ति, तथैव Query String Parameters अपि सन्ति Query String Parameters इति अनुरोधित URL मध्ये सामग्रीयाः पार्सिंग् परिणामः, Request Headers इति अनुरोधपङ्क्तिः अनुरोधशीर्षकस्य स्थानं च, Response Headers इति प्रतिक्रियारेखा प्रतिक्रियाशीर्षकं च, Response इति प्रतिक्रियाशरीरम् इति क्लिक् कुर्वन्तु
POST अनुरोधं प्रेषयन्तु: Headers मध्ये Query String Parameters अन्येषु परिवर्तनं भविष्यति ।
xhr XMLHttpRequest इत्यस्य संक्षिप्तनाम अस्ति, जालपृष्ठनिरीक्षणजालस्य XHR च AJAX अनुरोधानाम् फ़िल्टर अस्ति ।
AJAX url मध्ये पैरामीटर्स् वहन् GET अनुरोधं प्रेषयति प्रथमं प्रश्नचिह्नैः पृथक् कुर्वन्तु, ततः प्रत्यक्षतया लिखित्वा & इत्यनेन सह संयोजयन्तु ।
http:127.0.0.1:8080/server?a=100&b=200&c=300
AJAX xhr.send() इत्यस्मिन् पैरामीटर्स् वहन् GET अनुरोधं प्रेषयति ।
//3.发送
xhr.send('a=100&b=200&c=300');
xhr.send('a:100&b:200&c:300');
xhr.send('1231212313');
AJAX GET अनुरोधं प्रेषयति
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX GET 请求</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px #90b;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
//获取button元素
const btn=document.getElementsByTagName('button')[0];
const result=document.getElementById('result')
//绑定事件
btn.onclick=function(){
//1.创建对象
const xhr=new XMLHttpRequest();
//2.初始化 设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200');
//3.发送
xhr.send();
//4.事件绑定 处理服务端返回的结果
//on when 当...时候
//readystate是xhr对象中的属性，表示状态0,1,2,3,4
//change 改变
xhr.onreadystatechange=function(){
//判断（服务端返回了所有的结果）
if(xhr.readyState===4){
//判断响应状态码 200 404 403 401 500
//2xx 都是成功
if(xhr.status >= 200 && xhr.status<300){
//处理结果 行 头 空行 体
//1.响应行
// console.log(xhr.status);//状态码
// console.log(xhr.statusText);//状态字符串
// console.log(xhr.getAllResponseHeaders());//所有响应头
// console.log(xhr.response);//响应体
result.innerHTML=xhr.response
}else{
}
}
}
}
</script>
</body>
</html>
AJAX POST अनुरोधं प्रेषयति
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX POST 请求</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px #903;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
//获取元素对象
const result=document.getElementById("result");
//绑定事件
result.addEventListener("mouseover",function(){
//1.创建对象
const xhr=new XMLHttpRequest()
//2.初始化 设置类型与URL
xhr.open('POST','http://127.0.0.1:8000/server');
//3.发送
xhr.send('a=100&b=200&c=300');
//4.事件绑定
xhr.onreadystatechange=function(){
//判断
if(xhr.readyState===4){
if(xhr.status>=200&&xhr.status<300){
//处理服务端返回的结果
result.innerHTML=xhr.response;
}
}
}
})
</script>
</body>
</html>
तदनुरूपं पृष्ठभागः server.js
const express=require('express')
//创建应用对象
const app=express()
//创建路由规则
//req是对请求报文的封装
//res是对响应报文的封装
app.get('/server',(req,res)=>{
//设置响应头,设置允许跨域
res.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
res.send('ok');
})
app.post('/server',(req,res)=>{
//设置响应头,设置允许跨域
res.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
res.send('okkkk');
})
//监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口启动中。。。")
})
कस्टम् अनुरोधशीर्षकम्
//自定义请求头，需要在后端设置好，否则会报错
xhr.setRequestHeader('name','hhhhhh')
तदनुरूपं पृष्ठभागसेटिंग्स्
//可以接收任意类型的请求
app.all('/server',(req,res)=>{
//设置响应头,设置允许跨域
res.setHeader('Access-Control-Allow-Origin','*');
//响应体
res.setHeader('Access-Control-Allow-Headers','*');
//设置响应体
res.send('okkkk');
})
प्रथमं, res.setHeader('Access-Control-Allow-Headers','*'); no response can be obtained , अतः सर्वेषां कृते परिवर्तयन्तु।
सर्वरः JSON आँकडानां प्रतिक्रियां ददाति
app.all('/json-server',(req,res)=>{
//设置响应头,设置允许跨域
res.setHeader('Access-Control-Allow-Origin','*');
//响应头
res.setHeader('Access-Control-Allow-Headers','*');
//响应一个数据
const data={
name:'hoshi'
};
//对对象进行字符串转换
let str=JSON.stringify(data);
//设置响应体
res.send(str)
})
प्रतिक्रियाशरीरं केवलं स्ट्रिंग् अथवा बफरं भवितुम् अर्हति, अतः प्रकारं परिवर्तयितुं आवश्यकम् अस्ति ।
क्लायन्ट् यत् प्राप्नोति तत् स्ट्रिंग् अस्ति, यत् JSON ऑब्जेक्ट् इत्यत्र परिवर्तयितुं शक्यते द्वौ मार्गौ स्तः, एकः स्वचालितरूपान्तरणम् अपरं च मैनुअल् रूपान्तरणम् ।
मैनुअलरूपान्तरणम् : १.
const data=JSON.parse(xhr.response)
result.innerHTML=data.name;
स्वचालितरूपान्तरणम् : १.
//设置响应体数的类型
xhr.responseType='json';
result.innerHTML=xhr.response.name;
सः ३० वर्षाणाम् अनुसरणं प्रौयोगिक क्रमबद्धता युक्तं, आलंकार, जावा, जावास्विस्च, ph, css, सद्भावना संस्कृती, ph, css निर्वहनशील भाषा सुनावंश, ससरोत विद्वान विपक्षी विद्वान विनियोग विनियोग विनियोग विनियोग्य विवेचन विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग
