• 企业400电话
  • 网络优化推广
  • AI电话机器人
  • 呼叫中心
  • 全 部 栏 目

    网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Ajax和$.ajax使用实例详解(推荐)
    POST TIME:2021-10-18 06:01

    实例一(Ajax请求基本创建格式):

    html xmlns="http://www.w3.org/1999/xhtml">
    head runat="server">
     title>Ajax练习(GET,不考虑浏览器兼容性)/title>
     script type="text/JavaScript">
      function doRequest() {
       //不考虑浏览器兼容性问题
       var xmlHttp = new XMLHttpRequest();
       //打开一个与Http服务器的连接
       xmlHttp.open("GET", "Default.aspx", true);
       //与服务器端交互
       xmlHttp.send(null);
       //监听服务器端响应状态的改变事件
       xmlHttp.onreadystatechange = function () {
        //客户端与服务器端交互完成
        if (xmlHttp.readyState == 4) {
         //服务器端返回Http状态码:200表示请求成功,404未找到,403错误
         if (xmlHttp.status == 200) {
          //获得服务器端资源
          var result = xmlHttp.responseText;
          alert(result);
         }
        }
       }
      }
     /script>
    /head>
    body>
     form id="form1" runat="server">
     div>
      input type="button" id="btn" value="异步请求" onclick="doRequest()" />
     /div>
     /form>
    /body>
    /html>
    head runat="server">
     title>AjaxDemo实例/title>
     script src="JS/jQuery-1.4.1-vsdoc.js" type="text/javascript">/script>
     script type="text/javascript">
      //使用Ajax读取浏览器的工作内容 
      function readRequest() {
       //不考虑浏览器的兼容性问题
       var xmlhttp = new XMLHttpRequest();
       //打开一个与服务器相关的链接
       //发送请求
       //请求的方式(获取/发送),请求页面,是否异步
       xmlhttp.open("GET", "AjaxDemo.aspx", true);
       //发送数据
       xmlhttp.send(null);
       //接受服务器返回结果
       xmlhttp.onreadystatechange = function() {
        //请求完成
        if (xmlhttp.readyState == 4) {
         //链接成功
         if (xmlhttp.status == 200) {
          //输出浏览器的内容
          var result = xmlhttp.responseText;
          alert(result);
          window.alert("读取浏览器的内容成功!");
         }
        }
       };
      };
      function btn_Click() {
       var http = new ActiveXObject("Microsoft.XMLHTTP");
       //或者使用这一句创建 var xmlhttp = new XMLHttpRequest();
       if (!http) {
        alert("创建xmlhttp对象异常!");
        return false;
       }
       http.open("POST", "AjaxDemo.ashx", false);
       http.onreadystatechange = function() {
        if (http.readyState == 4) {
         //链接成功
         if (http.status == 200) {
          alert(http.responseText);
          document.getElementById("Text1").value = http.responseText;
         } else {
          window.alert("Ajax服务器返回错误!");
         }
        }
       };
       http.send();
      };
     /script>
    /head>
    body>
     form id="form1" runat="server">
     div>
     input id="Button1" type="button" value="使用Ajax读取浏览器的内容" onclick="readRequest()" />
     br/>
      input id="Text1" type="text" />nbsp;nbsp;
      input id="Button2" type="button" value="获取当前时间" onclick="btn_Click()"/>
     /div>
     /form>
    /body>

    实例二(见附件)

    考虑浏览器兼容性Ajax请求处理,获取后台xml文件内容。

    实例三(见附件)

    使用$.Ajax获取后台读取xml文件内容信息。

    function readXML1() {
       //创建XML对象
       var xmldom = new ActiveXObject("Microsoft.XMLDOM");
       //设置为异步
       xmldom.async = "false";
       //加载需要读取的XML文档
       xmldom.load("XML1.xml");
       info = "";
       //需要读取的根节点
       var node = xmldom.selectNodes("student");
       //依次读取其中的内容
       info = node[0].childNodes[0].nodeTypedValue + " br/>" + node[0].childNodes[1].nodeTypedValue+ "br/>" + node[0].childNodes[2].nodeTypedValue;
       document.getElementById("xmlmsg").innerHTML = info;
      };
       
     function readXML2() {
       //实例化xml对象
       var xml = new ActiveXObject("Microsoft.XMLDOM");
       //异步设置
       xml.async = "false";
       //加载需要读取的XML文档
       xml.load("XML2.xml");
       info = "";
       //选择需要读取的对象名称
       var fnode = xml.documentElement.selectNodes("people");
       //循环输出文档的内容
       for (var i = 0; i  fnode.length; i++) {
        for (var j = 0; j  fnode[i].childNodes.length; j++) {
         info += fnode[i].childNodes[j].text + "br/>";
        }
       }
       document.getElementById("xmlmsg").innerHTML = info;
      };

    好了,以上所述是小编给大家介绍的Ajax和$.ajax使用实例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

    您可能感兴趣的文章:
    • 使用Ajax生成的Excel文件并下载的实例
    • jQuery ajax中使用confirm,确认是否删除的简单实例
    • 实例讲解使用原生JavaScript处理AJAX请求的方法
    • AJAX和JSP混合使用方法实例
    • jQuery使用$.ajax提交表单完整实例
    • 实例详解angularjs和ajax的结合使用
    • jQuery Ajax使用实例
    • ThinkPHP中ajax使用实例教程
    上一篇:Ajax实现注册并选择头像后上传功能
    下一篇:Ajax入门学习教程(一)
  • 相关文章
  • 

    关于我们 | 付款方式 | 荣誉资质 | 业务提交 | 代理合作


    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    X

    截屏,微信识别二维码

    微信号:veteran88

    (点击微信号复制,添加好友)

     打开微信