zoukankan      html  css  js  c++  java
  • 初识Ajax

    认识Ajax:

    • 传统的web采用同步交互的形式,即用户向服务器发送一个请求,服务器根据请求执行任务并返回结果
    • Ajax采用异步交互

    Ajax组成部分:

    • javascript
    • css
    • DOM
    • XMLHttpRequest

    异步对象连接服务器

    • 创建:
    var xmlHttp;
    
    functin createXMLHttpRequest(){
    
       if(window.ActiveXObject)
    
           xmlHttp=new ActiveXObject("Micsoft.XMLHTTP");
      else if(window.XMLHttpRequest)
    
         xmlHttp=new XMLHttpRequest();
    }
    • 建立请求:

    xmlHttp.open("GET","xx.aspx",true);false :同步交互

    onreadystatechange事件

    xmlHttp.onreadystatechange=function(){
      if(xmlHttp.readyState==4&&xmlHttp.status==200)
      {
        //dosometing
    
       }
    )
    • send发送:
    xmlHttp.send(null);
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>XMLHttpRequest</title>
    <script language="javascript">
    var xmlHttp;
    function createXMLHttpRequest(){
        if(window.ActiveXObject)
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        else if(window.XMLHttpRequest)
            xmlHttp = new XMLHttpRequest();
    }
    function startRequest(){
        createXMLHttpRequest();
        xmlHttp.open("GET","9-1.aspx",true);
        xmlHttp.onreadystatechange = function(){
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
                alert("服务器返回: " + xmlHttp.responseText);
        }
        xmlHttp.send(null);
    }
    </script>
    </head>
    <body>
    <input type="button" value="测试异步通讯" onClick="startRequest()">
    </body>
    </html>

    GET VS POST

    GET:
    
    var queryString="firstName=aa&birthday=0624";
    
    var url="xx.aspx?"+queryString+"&timestamp="+new Date().getTime();
    
    xmlHttp.open("GET“,url);
    
    xmlHttp.send(null);//该语句只发送null

    POST

    POST:
    
    var queryString="firstName=aa&birthday=0624";
    
    var url="xx.aspx?timestamp="+new Date().getTime();
    
    xmlHttp.open("POST“,url);
    
    xmlHttp.setRequestHeader("Content-Type","app;ication/x-www-form-urlencoded");
    
    xmlHttp.send(queryString);//该语句负责发送数据
  • 相关阅读:
    三角函数都快忘光了
    Windows 10 LTSC 2019(1809) WSL 安装 CentOS 7
    随手写了个京东发票助手
    ASP 封装基本身份认证( HTTP Basic Authenticate)辅助类
    WebBrowser中打开新页面
    将QT窗口嵌入到WinForm窗口
    [摘录]如何按需前端显示指定的窗口
    实现TabControl 选项卡首个标签缩进的方法
    玩转时间操作
    Java 并发包中的高级同步工具
  • 原文地址:https://www.cnblogs.com/flashweb/p/2889501.html
Copyright © 2011-2022 走看看