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

    Ajax是动态JavaScript和XML技术的简称。主要作用是异步请求

    1.异步请求过程

    (1)Ajax对象创建

            var request;
            if(window.XMLHttpRequest){
                request = new XMLHttpRequest(); //IE7+,Firefox,Chrome,Opera,Safari...
            } else {
                request = new ActiveObject("Microsoft.XMLHTTP"); //IE6,IE5
            }

    下面不考虑那么老旧的兼容性了。

    (2)发起请求

            //GET请求
            request.open("GET","get.php",true);
            request.send();
            //POST请求 
            request.open("POST","post.php",true);
            request.setRequestHeader("Content-Type","application/x-wwww-form-urlencoded"); //告诉服务器要发送表单,设置Conten-type
            request.send("name=xiaohua&age=3");

    GET请求一般用于信息获取,url上传递参数,不够安全,信息限制在2000字节。

    POST请求一般用于修改服务器资源,发送大小无限制,内容在send()方法中发送。JavaScript中需要设置请求头的Content-Type。

    (3)状态监听

            request.onreadystatechange = function(){
                if(request.readyState===4 && request.status===200){
                    //做些事 request.responseText
                }
            }

    这个事件用来监听request.readystate的:

                        0:请求未初始化,open还没调用
                        1:服务器连接已建立,open已经调用
                        2:请求已接收,接收到头信息了
                        3:请求处理中,接收响应主体了
                        4:请求已完成,且响应已就绪,响应完成了

    request.status代表HTTP响应状态码。

    响应信息一般用到request.responseText。request.responseXML是XML形式的不常用。

    2.超时

    xhr = new XMLHttpRequest();
    
    xhr.abort(); //取消请求
    
    xhr.timeout = 1000;  //设置超时,如果超过1s将自动取消请求

    3.事件

    • onloadstart
    • onload
    • onloadend
    • onprogress
    • onerror
    • onabort
    • ontimeout
    • onreadystatechange

    jQuery中的Ajax

    相比js就简洁的多:

    $.ajax({                           
      url:'check.php',
      data: { num: value },
      dataType:"text",
      success: function (data) {
        // ...
      },
       error: function(jqXHR){
           // ...jqXHR.status
       }
    });

    $.ajax是jQuery中Ajax的底层方法,很多方法都间接调用了它,如:

    $.getJSON('url',[data],function(data){   //异步获取JSON数据
      //data["name"]
    })
    
    $.getScript('url',[data],[callback])    //异步加载js
    
    $.get('url',function(data){})  //用GET方式异步请求服务器端数据
    
    $.post('url',{num:$("#id").val()},function(data){}) //用POST方式异步请求服务器端数据

    其他相关的方法:

    load('url',[data],[callback])   //异步加载资源
    
    serialize() //序列化,把表单中有name属性的元素值变成标准url编码文本字符串
    
    $.ajaxSetup([options]) //设置Ajax全局默认选项
    
    $(selector).ajaxStart(callback) //Ajax请求发出前触发函数
    
    $(selector).ajaxStop(callback) //Ajax请求发出前触发函数
  • 相关阅读:
    数据库表结构变动发邮件脚本
    .net程序打包部署
    无法登陆GitHub解决方法
    netbeans 打包生成 jar
    第一次值班
    RHEL6 纯命令行文本界面下安装桌面
    C语言中格式化输出,四舍五入类型问题
    I'm up to my ears
    How to boot ubuntu in text mode instead of graphical(X) mode
    the IP routing table under linux@school
  • 原文地址:https://www.cnblogs.com/feitan/p/5287239.html
Copyright © 2011-2022 走看看