• Ajax基础实例,看了直接掌握学会！

    创建一个简单的XMLHttpRequest，从一个TXT文件中返回数据。

    <script>
function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()       //xmlhttp.onreadystatechange
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;   //.innerHTML
		}
	}
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	xmlhttp.send();
}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    <div id="myDiv"><h2>使用 AJAX 修改该文本内容h2>div>
<button type="button" onclick="loadXMLDoc()">修改内容button>

    • 1
    • 2

    在这里插入图片描述

    创建一个简单的XMLHttpRequest，从一个XML文件中返回数据。

    function loadXMLDoc(url)   
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById('A1').innerHTML=xmlhttp.status;        // .innerHTML
    document.getElementById('A2').innerHTML=xmlhttp.statusText;
    document.getElementById('A3').innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    <h2>Retrieve data from XML fileh2>
<p><b>Status:b><span id="A1">span>p>
<p><b>Status text:b><span id="A2">span>p>
<p><b>Response:b><span id="A3">span>p>
<button onclick="loadXMLDoc('note.xml')">Get XML databutton>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在这里插入图片描述

    检索资源（文件）的头信息。

    <script>
function loadXMLDoc(url)
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById('p1').innerHTML=xmlhttp.getAllResponseHeaders();    //innerHTML
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    <p id="p1">The getAllResponseHeaders() function returns the header information of a resource, like length, server-type, content-type, last-modified, etc.p>
<button onclick="loadXMLDoc('/try/ajax/ajax_info.txt')">Get header informationbutton>


    • 1
    • 2
    • 3

    在这里插入图片描述

    检索资源（文件）的指定头信息。

    document.getElementById('p1').innerHTML="Last modified: " + xmlhttp.getResponseHeader('Last-Modified');                      //innerHTML

    • 1
    <p id="p1">The getResponseHeader() function is used to return specific header information from a resource, like length, server-type, content-type, last-modified, etc.p>
<button onclick="loadXMLDoc('/try/ajax/ajax_info.txt')">Get "Last-Modified" informationbutton>

    • 1
    • 2

    在这里插入图片描述

    当用户在文本框内键入字符时网页如何与Web服务器进行通信💥

    用AJAX从ASP 文件返回数据

    <script>
function showHint(str)
{
  var xmlhttp;
  if (str.length==0)
  { 
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;      //innerHTML
    }
  }
  xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
  xmlhttp.send();
}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    <h3>在输入框中尝试输入字母 a:h3>
<form action=""> 
输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
form>
<p>提示信息: <span id="txtHint">span>p> 

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    用AJAX网页如何获取数据库中的信息💥

    <script>
function showCustomer(str)
{
  var xmlhttp;    
  if (str=="")
  {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
  xmlhttp.send();
}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    <form action=""> 
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="APPLE">Apple Computer, Inc.option>
<option value="BAIDU ">BAIDU, Incoption>
<option value="Canon">Canon USA, Inc.option>
<option value="Google">Google, Inc.option>
<option value="Nokia">Nokia Corporationoption>
<option value="SONY">Sony Corporation of Americaoption>
select>
form>
<br>
<div id="txtHint">客户信息将显示在这...div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    在这里插入图片描述

    创建一个XMLHttpRequest从XML文件中检索数据并显示在一个HTML表格中。

    <script>
function loadXMLDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xhttp.open("GET", "cd_catalog.xml", true);
  xhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="ArtistTitle";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i <x.length; i++) {
    table += "" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "";
  }
  document.getElementById("demo").innerHTML = table;          //
}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    <style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
style>
<button type="button" onclick="loadXMLDoc()">获取我收藏的 CDbutton>
<br><br>
<table id="demo">table>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    在这里插入图片描述

    用一个callback函数创建一个XMLHttpRequest，并从一个TXT文件中检索数据

    <script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// IE7+, Firefox, Chrome, Opera, Safari 代码
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6, IE5 代码
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
	loadXMLDoc("/try/ajax/ajax_info.txt",function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;      //
		}
	});
}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    <div id="myDiv"><h2>使用 AJAX 修改文本内容h2>div>
<button type="button" onclick="myFunction()">修改内容button>

    • 1
    • 2

    在这里插入图片描述

    AJAX JSON 实例💥

    <script>

xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
	  var myArr = JSON.parse(this.responseText);
      myFunction(myArr)    //JSON.parse( )
    }
  }
  xmlhttp.open("GET","/try/ajax/json_ajax.json",true);
  xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
  xmlhttp.send();
}

function myFunction(arr) {
  var out = "";
  var i;
  for(i = 0; i < arr.length; i++) {
    out += '+ arr[i].url + '">' + 
    arr[i].title + '
    ';
  }
 document.getElementById("myDiv").innerHTML=out;       //
}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    <h2>AJAX JSONh2>
<button type="button" onclick="loadXMLDoc()">请求 JSON 数据button>
<div id="myDiv">div>

    • 1
    • 2
    • 3

    在这里插入图片描述

  • 相关阅读:
    eslint系统笔记
    SpringBoot中接口加密解密统一处理！
    Shell 学习笔记 - 导读 + 变量定义
    [NOIP2016 提高组] 玩具谜题
    读书记录 《就算生得暗淡,也要活得光彩》
    Scss 基础语法
    【JAVA知识梳理】泛型详解
    【Linux】常用命令汇总
    【AGC】开放式测试示例
    React 生命周期函数总结【CV】
  • 原文地址：https://blog.csdn.net/qq_44174346/article/details/126397925