Ajax学习笔记

最新推荐文章于 2025-08-21 21:29:08 发布

FireflyBeacon

最新推荐文章于 2025-08-21 21:29:08 发布

阅读量502

点赞数

CC 4.0 BY-SA版权

文章标签： ajax

本文链接：https://blog.youkuaiyun.com/FireflyBeacon/article/details/47022517

本文介绍了异步JavaScript和XML(Ajax)的工作原理和技术细节，包括如何创建XMLHttpRequest对象、GET与POST请求的区别、响应处理机制及XML数据解析。同时探讨了Ajax与服务器交互的方法，如PHP、ASP和JSP等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

异步JavaScript和XML
1.无需重载页面，部分更新页面。
2.工作原理：浏览器端产生XMLHttpRequest对象，发送请求
服务器接收到请求创建response返回需要的数据
浏览器端处理数据更新部分页面
3.创建 XMLHttpRequest 对象的语法：

 variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

 variable=new ActiveXObject("Microsoft.XMLHTTP");

兼容创建：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");
    }

4.GET向服务器发送请求，参数直接URL传值

  .open("方法",url,是否异步处理);
  xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
  xmlhttp.send();

5.POST请求的使用情况：
无法使用缓存文件向服务器发送大量数据发送未知字符的用户输入
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。
然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.html",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    mlhttp.send("fname=Henry&lname=Ford");

6.优势机制：在等待响应时执行其他脚本，响应就绪后再进行处理
7.编写回调函数

.onreadystatechange=function()
    {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)//响应就绪，状态ok
      {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
      }
    }

8.如果异步同步设置为false，不用编写onreadystatechange 函数
把代码放到 send()语句后面即可；
缺点：脚本会挂起直到服务器返回数据。
9.服务器返回responseText/responseXML
XML文件处理：

 xmlDoc=xmlhttp.responseXML;
    txt="";
    x=xmlDoc.getElementsByTagName("ARTIST");
    for (i=0;i<x.length;i++)
    {
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
    }
    document.getElementById("myDiv").innerHTML=txt;

10.onreadystatechange事件
readystate：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status：
200：OK
404未找到页面
11.多个Ajax回调下，使用标准函数，回调函数作为参数传入

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();
    }

12.Ajax数据库通信 php/asp/jsp等后台实现。
13.Ajax XML处理

    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");//获取特定标签
    for (i=0;i<x.length;i++)//遍历