• 学无止境,学习AJAX(二)


    POST 请求

    一个简单 POST 请求:

    xmlhttp.open("POST","demo_post.asp",true);
    xmlhttp.send();

    带参数:

    xmlhttp.open("POST","ajax_test.asp",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("fname=Bill&lname=Gates");
    方法描述
    setRequestHeader(header,value)

    向请求添加 HTTP 头。

    • header: 规定头的名称
    • value: 规定头的值


    open() 方法的 url 参数是服务器上文件的地址:

    xmlhttp.open("GET","ajax_test.asp",true);

    该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)。

    异步 - True 或 False?

    AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

    XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:

    xmlhttp.open("GET","ajax_test.asp",true);

    对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。

    通过 AJAX,JavaScript 无需等待服务器的响应,而是:

    • 在等待服务器响应时执行其他脚本
    • 当响应就绪后对响应进行处理

    当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:

    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","test1.txt",true);
    xmlhttp.send();

    个人认为

    Async = false

    不是必要的话就不要用!!!

    因为如果服务器繁忙或者网络慢,这个时候我们的应用会直接挂死,无响应。

    服务器响应

    如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

    属性描述
    responseText 获得字符串形式的响应数据。
    responseXML 获得 XML 形式的响应数据。

    responseText 属性

    如果来自服务器的响应并非 XML,请使用 responseText 属性。

    responseText 属性返回字符串形式的响应,因此您可以这样使用:

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    responseXML 属性

    如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:

    请求 books.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;

    onreadystatechange 事件

    当请求被发送到服务器时,我们需要执行一些基于响应的任务。

    每当 readyState 改变时,就会触发 onreadystatechange 事件。

    readyState 属性存有 XMLHttpRequest 的状态信息。

    下面是 XMLHttpRequest 对象的三个重要的属性:

    onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
    readyState

    存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

    • 0: 请求未初始化
    • 1: 服务器连接已建立
    • 2: 请求已接收
    • 3: 请求处理中
    • 4: 请求已完成,且响应已就绪
    status

    200: "OK"

    404: 未找到页面

    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }

    当readyState=4, status=200时,这个时候表示处理完成,且状态OK。

    学了半天,咱也写个测试以下学习效果呗~ 测试很简单,你输入0-9后,文本框下方自动显示对应的中文数字。(零...玖)

    <script type="text/javascript">
    function covtochs(str) { var xmlhttp;
    //如果用户输入长度为0,就清空显示。 if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; }
    //创建对象 if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
    //处理ONREADYSTATECHANGE事件,我们这里只相应服务器反馈成功的 xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","covto.asp?q="+str,true); xmlhttp.send(); } </script> </head> <body> <h1>请输入框中输入入数字(0-9)</h1> <form action=""> 姓氏:<input type="text" id="txt1" onkeyup="covtochs(this.value)" /> </form> <p>服务器反馈信息:<span id="txtHint"></span></p>

      

    服务器上的文件内容:

    covto.asp
    <%
    response.expires=-1
    '获取用户输入
    sUserInput=request.querystring("q")
    
    select case sUserInput
      case "0" 
         sResult=""
      case "1"
         sResult=""
      case "2" 
         sResult=""
      case "3" 
         sResult=""
      case "4" 
         sResult=""
      case "5" 
         sResult=""
      case "6" 
         sResult=""
      case "7" 
         sResult=""
      case "8" 
         sResult=""
      case "9" 
         sResult=""
      case else 
         sResult=""
    end select
    
    if hint="" then
      response.write("")
    else
      response.write(sResult)
    end if
    %>

    测试一下呗,挺简单的吧。



  • 相关阅读:
    Windows python 鼠标键盘监控及控制
    python 执行adb shell 命令
    python Windows提示框
    判断function属于函数或方法
    生成不同时间下的LOG
    pyqt5 QCalendar类中常用的方法
    python字符串大小写转换
    configparser 模块的基本方法
    QGridLayout类中常用的方法
    Day049--jQuery的文档操作和事件介绍
  • 原文地址:https://www.cnblogs.com/vicen/p/5177800.html
Copyright © 2020-2023  润新知