Ajax补充(一)

作者: 蚊子简叔 | 来源:发表于2016-10-17 11:58 被阅读0次

继之前学习的认识Ajax相关基础内容,今天将做一些补充学习。

(一)onreadystatechange事件的补充

什么情况下会产生onreadystatechange事件呢?
1、每当readyState改变是,就会触发onreadystatechange事件。
2、而readyState存在于XMLHttpRequest对象中。
3、在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
4、当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
相关代码如下:

xmlhttp.onreadystatechange = function(){
    if(xmlhttp.readystate ==4 && xmlhttp.status == 200){
      document.getElementById(xxx).innerHTML =xmlhttp. responseText;
    }
}
(二)Ajax中使用回调函数

为什么?
如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):
使用回调函数的代码:

//例子
<!doctype html>
<html>
<head>
    <meta charset = "utf-8">
    <title>用回调函数写Ajax</title>    
</head>
<body>
    <div id="myText">使用Ajax被修改的内容</div>
    <input type="button" onclick="myfunction()"  value="点击修改">
    <script type="text/javascript">
          var xmlhttp;
          、、该函数可以重复多用。把变化的东西用参数形式传进来
          function loadinformation(url,func){
              if(window.XMLHttpRequest){
                  xmlhttp =new XMLHttpRequest();
              }else{
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
              }
            xmlhttp.onreadystatechange =func;
            open("GET",a,true);
            send();
            }
          }
          function myfunction(){
                //用户通过点击事件调用该函数,函数中的函数以参数形式传入。
                loadinformation(xxxx,function(){
                  if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                  document.getElementById("myText").innerHTML =  xmlhttp.responseText;
                });           
          }
    </script>
</body>
</html>

补充什么是回调函数:函数以一种参数的形式传递到另一函数。

后续将会补充一下四点:

(三)Ajax的ASP/PHP实例
(四)Ajax的数据库
(五)Ajax中的xml
(六)JQuery中的Ajax

相关文章

  • Ajax补充(一)

    继之前学习的认识Ajax相关基础内容,今天将做一些补充学习。 (一)onreadystatechange事件的补充...

  • ajax 补充

    jquery 中封装了ajax,使得我们可以十分便捷的使用ajax, 而原生的ajax,也必须要学会使用,对吧,,...

  • jQuery补充和Ajax基础

    jQuery的补充 Ajax 列子1 列子2

  • js原生ajax

    原生ajax的写法: 1.get 2.post 3.可以封装到方法中使用 4.补充一点

  • springmvc后台往页面传值

    先说说页面往后台传值的方法,欢迎补充:一、form表单提交(常用)二、JQuery中的ajax提交(常用)三、通过...

  • 2019-02-14 day9 jQuery和Ajax 和拖动方

    01jQuery补充 02Ajax基础 主要是get/post进行网络请求获取数据 03拖动方块移动 注意移动的时...

  • Ajax 实现瀑布流

    1.写在前面: 补充个知识点,当我们用 Ajax 来请求 json 数据的时候,类似这样$.get("a.json...

  • AJAX

    一、简介 AJAX菜鸟教程 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML。 AJAX...

  • JQuery学习总结(二)AJAX技术

    一、AJAX简介 什么是 AJAX ?AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创...

  • ajax

    一、ajax概念: ajax:Ajax 即“Asynchronous Javascript And XML”(异步...

网友评论

    本文标题:Ajax补充(一)

    本文链接:https://www.haomeiwen.com/subject/wqmayttx.html