• ajax技术笔记


    一、什么是ajax(异步 javascriptxml

    为了解决传统的等待->响应->等待的弊端的技术,又叫局部页面刷新技术。可以实现浏览器页面的部分数据更新而不刷新整个页面。

    浏览器内置对象(XMLHttpRequest)向服务器发送请求,服务器返回xml数据或文本数据给浏览器,然后浏览器中使用这些数据更新局部的页面信息。

    等待-响应-等待

    指早起的web开发中,表单提交数据浏览器会将注册页面抛弃,等服务器返回一个完整页面。在等待过程中,用户不能做任何操作。服务器生成页面发送给浏览器,浏览器重新解析页面生成相应界面。

    一、ajax原理

     

    一、ajax编程

    1)获取XMLHttpRequest对象

    由于XMLHttpRequest对象并没有标准化,在不同浏览器下支持不同,IE不支持此对象

    IE中使用。但是微软支持一个对象同样可以实现这样的功能。他就是ActiveXObject.                              

    XMLHttpRequest对象中的重要属性

    A.onreadystatechange   注册监听器,绑定一个事件处理函数

    B.readyState    返回该XMLHttpRequest对象与服务器通讯的状态

    返回值是number类型,不同值表示含义:

      0 该对象已建立,但未初始化(还没有调用open方法)

      1 对象已创建并初始化(还没有调用send方法)

      2 数据发送,send方法调用

      3 数据传输中,已经接受部分数据

      4     响应结束,数据接受完毕

    C. responseText 获得服务器响应回来的文本内容

    D. responseXML 获得服务器返回的XML dom 对象

    E.   status 获取状态码

    2)使用XMLHttpRequest发送请求到服务器

    A.get请求

    function checkName(){
                var xhr=null;
                    if(window.XMLHttpRequest){
                        xhr=new XMLHttpRequest();
                    }else{
                        xhr=new ActiveXObject();
                    }
                xhr.open("get","checkname.do");
                xhr.send();
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4){
                        if(xhr.status==200){
                            var txt = xhr.responseText;
                            $('namespan').innerHTML = txt;
                        }else{
                            $('namespan').innerHTML = "系统故障,请稍后重试";
                        }
                    }else{
                        $('namespan').innerHTML = "正在验证...";
                    }
                }
            }

    B.post请求

    function checkName2(){
                var xhr=null
                if(window.XMLHttpRequest){
                    xhr=new XMLHttpRequest;
                }else{
                    xhr=new ActiveXObject('Microsoft.XMLHttp');
                }
                xhr.open("post", "checkName.do", true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.send("user=dhh&password=123");
                xhr.onreadystatechange()==function(){
                    if(xhr.readyState==4){
                        if(xhr.status==200){
                            var txt = xhr.responseText;
                            $('namespan').innerHTML = txt;
                        }else{
                            $('namespan').innerHTML = "系统故障,请稍后重试";
                        }
                    }else{
                        $('namespan').innerHTML = "正在验证...";
                    }
                }
            }

    3)服务器端处理请求

    4)监听器中,处理服务器返回的响应数据

    但是我们平时更多时候是使用jQuery实现ajax请求。jQuery实现下更加简洁

    
    
    function checkName2(){
    $.ajax({
        type:"post",
        url:"UpLoad",
        data:par,
        dataType:"text",
        success:function(data){
                     console.log(data);
                },
        error:function(data){
                      alert("系统错误请联系管理员");
                }    
        }); 
    }

    文件上传功能的ajax也可以实现 需要用到formData对象

    function AjaxForm(){
            var formData = new FormData($( "#form1" )[0]);
                 $.ajax({
                    type:"post",
                    url:"AjaxForm",
                    data:formData,
                    dataType:"text",
                    async: false,  
                    cache: false,  
                    contentType: false,  
                    processData: false,  
                    success:function(data){
                alert(data); }, error:function(data){     alert("系统错误请联系管理员"); } }); }
  • 相关阅读:
    GateWay程序分析02_IAP_FLASH.H
    GateWay程序分析05_WDT.h
    GateWay程序分析03_timer.h
    GateWay程序分析_主函数_02整体流程
    网关系统软件设计_系统需求分析v1
    [收藏]DIV中图片居中
    CSS HACK 手记
    一道题“谁养鱼”的穷举解法。
    简单好用的联动下拉控件(修正)
    权限认证的WEB页面实施
  • 原文地址:https://www.cnblogs.com/blackdeng/p/7054437.html
Copyright © 2020-2023  润新知