首页 > 其他分享 >AJAX

AJAX

时间:2023-02-01 21:11:27浏览次数:40  
标签:function XMLHttpRequest CD AJAX xmlhttp txt xmlDoc

什么是Ajax

Ajax=异步JavaScript和XML

XHR响应

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>responsesXML属性</title>
 6         <script>
 7             function loadXMLDoc(){
 8                 var xmlhttp;
 9                 var txt,x,i;
10                 if(window.XMLHttpRequest){
11                     xmlhttp=new XMLHttpRequest();
12                 }
13                 else{
14                     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
15                 }
16                 xmlhttp.onreadystatechange=function(){
17                     if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
18                         xmlDoc=xmlhttp.responseXML;
19                         console.log(xmlDoc)
20                         txt='';
21                         x=xmlDoc.getElementsByTagName('ARTIST');
22                         for(i=0;i<x.length;i++){
23                             txt=txt+x[i].childNodes[0].nodeValue+"<br>"
24                         }
25                         console.log(txt)
26                         document.getElementById("myDiv").innerHTML=txt;
27                     }
28                 }
29                 xmlhttp.open("GET","https://www.runoob.com/try/demo_source/cd_catalog.xml", true);
30                 xmlhttp.send();
31             }
32         </script>
33     </head>
34     <body>
35         <h2>我收藏的CD</h2>
36         <div id="myDiv"></div>
37         <button type="button" onclick="loadXMLDoc()">获取我的CD</button>
38     </body>
39 </html>

 

标签:function,XMLHttpRequest,CD,AJAX,xmlhttp,txt,xmlDoc
From: https://www.cnblogs.com/wenzm/p/17084141.html

相关文章

  • 10-项目实战-ajax初体验
    一.ajax介绍1.ajax架构浏览器向网站发送请求时:URL和表单的形式提交form表单:-GET-POST特点:页面刷新除此之外,也可以基......
  • (补12月19)ORM查询优化、ORM事物操作、ORM常用字段参数、Ajax请求、Content-Type
    ORM查询优化、ORM事物操作、ORM常用字段参数、Ajax请求、Content-TypeQ查询进阶操作先产生一个对象q_obj=Q()修改默认对象q_obj.connector='or'添加查询条件,可......
  • AJAX整理目录
    原生AJAX原生AJAX概述AJAX(请求响应报文&控制台查看通信报文&node.js&express框架)AJAX发送GET请求&发送参数AJAX发送POST请求&发送参数&设置请求AJAX服务器响应JSON......
  • AJAX CORS
    视频HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><ti......
  • AJAX jsonp实践(验证用户名是否存在)
    视频HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><ti......
  • AJAX jQuery发送jsonp请求
    视频HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><ti......
  • AJAX jsonp实现原理
    视频script标签处理函数调用,handle(),在html中实现handle(),在js中返回'handle()'字符串从而实现跨域。HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset......
  • AJAX同源策略演示
    HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>......
  • Axios发送AJAX请求(通用方法型ajax)
    视频HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><t......
  • jQuery中AJAX(通用型方法ajax)
    视频HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><ti......