ఏజాక్స్ - XMLHttpRequest ఆబ్జెక్ట్

XMLHttpRequest 对象是 AJAX 的基石。

  1. 创建 XMLHttpRequest 对象
  2. కాల్బాక్స్ ఫంక్షన్ నిర్వహించండి
  3. 打开 XMLHttpRequest 对象
  4. సర్వర్కు క్రియాశీలమైన అభ్యర్థనలను పంపడం

XMLHttpRequest ఆబ్జెక్ట్

అన్ని ఆధునిక బ్రౌజర్లు ఈ ఉపయోగించబడుతుంది. XMLHttpRequest ఆబ్జెక్ట్.

ఎక్సిఎమ్ఎల్ హెచ్టెన్ ప్రాక్టిస్ వార్తలు ఉపయోగించబడుతుంది వెబ్ సర్వర్లతో ప్రక్రియాలో డాటా మార్పిడి చేయడానికి. ఇది మొత్తం పేజీని మళ్ళిస్తూ పేజీలో పార్ట్ కంటెంట్ ను నవీకరించడానికి ఉపయోగపడుతుంది.

创建 XMLHttpRequest 对象

所有现代浏览器（Chrome、Firefox、IE、Edge、Safari、Opera）都有内置的 XMLHttpRequest ఆబ్జెక్ట్.

XMLHttpRequest ఆబ్జెక్ట్ సృష్టించడానికి సంకేతం:

variable = new XMLHttpRequest();

కాల్బాక్స్ ఫంక్షన్ నిర్వహించండి

కాల్బాక్స్ ఫంక్షన్ మరొక ఫంక్షన్కు పారామీటర్ గా పాస్ చేయబడే ఫంక్షన్.

ఈ పరిస్థితిలో, కాల్బాక్స్ ఫంక్షన్లో ప్రతిస్పందన సిద్ధమైనప్పుడు చేయవలసిన కోడ్ను చేర్చాలి.

xhttp.onload = function() {
  // ప్రతిస్పందన సిద్ధమైనప్పుడు ఏం చేయాలి
}

అభ్యర్ధనను పంపండి

సర్వర్కుకు అభ్యర్ధనను పంపడానికి, XMLHttpRequest ఆబ్జెక్ట్ యొక్క open() మరియు send() పద్ధతిలో:

xhttp.open("GET", "ajax_info.txt");
xhttp.send();

ఇన్స్టాన్స్

// XMLHttpRequest ఆబ్జెక్ట్ సృష్టించండి
const xhttp = new XMLHttpRequest();
// కాల్బాక్స్ ఫంక్షన్ నిర్వహించండి
xhttp.onload = function() {
  // ఇక్కడ డాటాను ఉపయోగించవచ్చు
}
// అభ్యర్ధనను పంపండి
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

స్వయంగా ప్రయత్నించండి

క్రాస్ డొమైన్ ప్రాప్ట్స్ (Access Across Domains)

భద్రత కారణాల కొరకు, ఆధునిక బ్రౌజర్లు క్రాస్ డొమైన్ ప్రాప్ట్స్ను అనుమతించవు.

ఇది మీ వెబ్ పేజీ మరియు దానిని ప్రయత్నించే ఎక్సిమ్ ఫైలు ఒకే సర్వర్పై ఉండాలని అర్థం చేస్తుంది.

CodeW3C.com పై ఉన్న ఉదాహరణలు కోడ్వైత్సిక్కమ్ డొమైన్లో ఉన్న ఎక్సిమ్ ఫైల్లుగా తెరవబడతాయి.

మీరు పైన ఉన్న ఉదాహరణను మీ వెబ్ పేజీలలో ఉపయోగించడానికి, మీరు లోడ్ చేసే XML ఫైలు మీ సర్వర్కుపై ఉండాలి.

XMLHttpRequest ఆబ్జెక్ట్ పద్ధతులు

పద్ధతి 描述
new XMLHttpRequest() కొత్త XMLHttpRequest ఆబ్జెక్ట్ సృష్టించండి.
abort() ప్రస్తుత అభ్యర్ధనను రద్దు చేయండి.
getAllResponseHeaders() హెడర్ సమాచారాన్ని అందిస్తుంది.
getResponseHeader() ప్రత్యేక హెడర్ సమాచారాన్ని అందిస్తుంది.
open(method, url, async, user, psw)

అభ్యర్ధనను నిర్వహించండి.

  • methodఅభ్యర్ధన రకం GET లేదా POST
  • urlఫైల్ స్థానం
  • asyncఅనుకూలంగా సింక్రనస్ (సింక్రనస్) లేదా ఆసింక్రనస్ (ఆసింక్రనస్)
  • userఆప్షనల్ యూజర్ నేమ్
  • pswఆప్షనల్ పాస్వర్డ్
send() సర్వర్కు అభ్యర్ధనను పంపండి, GET అభ్యర్ధనకు ఉపయోగించండి.
send(string) సర్వర్కు అభ్యర్ధనను పంపండి, POST అభ్యర్ధనకు ఉపయోగించండి.
setRequestHeader() పంపించబడిన హెడర్లకు టాగ్/విలు పారితోగాలు జోడించండి.

XMLHttpRequest ఆబ్జెక్ట్ లక్షణాలు

属性 描述
onload అంగీకరించబడిన (లోడ్) అభ్యర్ధనకు సంబంధించిన ఫంక్షన్ నిర్వహించండి.
onreadystatechange రెడీస్టేట్ అంతరం సమయంలో కాల్బాక్స్ ఫంక్షన్ నిర్వహించండి.
readyState

保存 XMLHttpRequest 的状态。

  • 0：请求未初始化
  • 1：服务器连接已建立
  • 2：请求已收到
  • 3：正在处理请求
  • 4：请求已完成且响应已就绪
responseText 以字符串形式返回响应数据。
responseXML 以 XML 数据返回响应数据。
status

అభ్యర్ధన స్థితి సంఖ్యను తిరిగి ఇవ్వండి

  • 200: "సరైనది"
  • 403: "నిషేధించబడింది"
  • 404: "కనుగొనబడలేదు"

పూర్తి జాబితా కొరకు సందర్శించండి Http సందేశాల పరిశీలన హాండ్బుక్
statusText 返回状态文本（比如 "OK" 或 "Not Found"）

onload 属性

使用 XMLHttpRequest 对象时，您可以定义一个回调函数，以便在请求收到答复时执行。

请在 XMLHttpRequest 对象的 onload 属性中定义该函数：

ఇన్స్టాన్స్

xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

స్వయంగా ప్రయత్నించండి

多个回调函数

如果网站中有多个 AJAX 任务，则应创建一个执行 XMLHttpRequest 对象的函数，并为每个 AJAX 任务创建一个回调函数。

函数调用应包含 URL 以及响应准备就绪时要调用的函数。

ఇన్స్టాన్స్

loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {cFunction(this);}
  xhttp.open("GET", url);
  xhttp.send();
}
function myFunction1(xhttp) {
  // 这里是动作
}
function myFunction2(xhttp) {
  // 这里是动作
}

onreadystatechange 属性

readyState 属性保存 XMLHttpRequest 的状态。

onreadystatechange 属性定义了一个回调函数，当 readyState 改变时执行该函数。

status 属性和 statusText 属性保存 XMLHttpRequest 对象的状态。

属性 描述
onreadystatechange 定义当 readyState 属性改变时调用的函数。
readyState

保存 XMLHttpRequest 的状态。

  • 0：请求未初始化
  • 1：服务器连接已建立
  • 2：请求已收到
  • 3：正在处理请求
  • 4：请求已完成且响应已就绪
status

అభ్యర్ధన స్థితి సంఖ్యను తిరిగి ఇవ్వండి

  • 200: "సరైనది"
  • 403: "నిషేధించబడింది"
  • 404: "కనుగొనబడలేదు"

పూర్తి జాబితా కొరకు సందర్శించండి Http సందేశాల పరిశీలన హాండ్బుక్
statusText statusText

స్టేటస్ టెక్స్ట్ పునఃప్రత్యక్షం చేయబడుతుంది (ఉదా. "OK" లేదా "Not Found").

ప్రతిసారి readyState మారితే onreadystatechange ఫంక్షన్ కాల్ అవుతుంది. 4 మరియు status ప్రతిస్పందన ఉంది: 200 నేరుగా ప్రతిస్పందన సిద్ధమయ్యింది:

ఇన్స్టాన్స్

function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}

స్వయంగా ప్రయత్నించండి

onreadystatechange ఇవెంట్ నాలుగు సార్లు ప్రచోదించబడింది (1-4), ప్రతిసారి readyState మారుతుంది ఒకసారి.