zoukankan      html  css  js  c++  java
  • javascript 实现ajax

    AJAX 英文名称 Asynchronous JavaScript and XML即异步的 JavaScript 和 XML
    AJAX 是与服务器交换数据并更新部分网页一门无刷新技术
    构建自己的ajax 函数实现网页的无刷新数据交互
    ajax的基础对象 XMLHttpRequest 对象 ,我们可以通过此对象与服务器交换数据
    现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。注意IE5 和 IE6 使用 ActiveXObject 因此当我们构建
    XMLHttpRequest 的示例对象时我们需要验证当前浏览器支持的版本

    XMLHttpRequest 主要函数方法和属性

    向服务器发送请求open(method,url,async)
    method:向服务器请求数据方式 get或 post
    url :请求的文件url路径
    async:向服务器发送请求的类型true(异步)或 false(同步)
    注意当使用 async=true 时,则需在 onreadystatechange 事件中的根据请求执行状态完成需要的操作:(同步时在send() 后面获取数据操作即可)
    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    //请求文本成功时的操作
    }
    }

    请求头信息设置:
    setRequestHeader(header,value) 向请求添加 http 头。header: 规定头的名称 value: 规定头的值
    如:xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    请求发送到服务器:
    send(string) 当采用get方式时调用的函数为send(),当采用post方式时调用函数send(string)

    对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。
    通过 AJAX,JavaScript 无需等待服务器的响应,而是:
    在等待服务器响应时执行其他脚本
    当响应就绪后对响应进行处理
    请记住,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。
    注释:当您使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可:

    服务器响应:
    服务器返回文本我们可以用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

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


    onreadystatechange 事件
    当请求被发送到服务器后,服务器会执行一些基于响应的任务。
    每当 readyState 改变时,就会触发 onreadystatechange 事件。
    readyState 属性存储 XMLHttpRequest 的状态信息。
    readyState 存有 XMLHttpRequest 的状态
    0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成,且响应已就绪
    status: 服务器执行结果 200: "OK"

    示例源代码:
    <script type="text/javascript">
    var xmlhttp = null;
    if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
    }
    else {
    xmlht = new ActiveXObject("Microsoft.XMLHTTP");
    }
    var xml = "";
    xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    xml = xmlhttp.responseText;
    if (xml == "") {
    xml = "null";
    }
    alert(xmlhttp.responseText);
    $("#div").html(xml);
    }
    };
    xmlhttp.open("get", "WebForm1.aspx", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("name=sanmao&age=20");

    </script>

  • 相关阅读:
    wordpress wp_head()函数 浏览器顶部 空白28px 解决办法
    Google Code Project中文翻译
    PNY 必恩威 4G U盘 量产
    Ubuntu安装软件方法图文指南教程
    Web开发人员必须学习的5门课程
    正则表达式
    5个音乐伴奏下载网站推荐
    卸载“一键还原精灵”后,如何删除其备份的g.文件夹?
    常用开源协议详细解析
    零命令玩转Ubuntu 8.10(准备篇)
  • 原文地址:https://www.cnblogs.com/sunnyblogs/p/3412877.html
Copyright © 2011-2022 走看看