• 前端随心记---------Ajax


    Ajax

    AJAX => Asynchronous Javascript And XML
    直译:异步的 JavaScript  和  XML
    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
     
    通俗的讲,AJAX就是JS通过一个网址去加载数据,这个过程通常是用户不可见的
    传统的网页(不使用 AJAX)如果需要更新内容,必需重新加载整个网页
     
    在程序中,同步和异步的区别就是在于代码的执行顺序。
    同步代码按照顺序运行,异步代码不按照顺序运行。
     

    ajax如何使用

     
    XMLHttpRequest 对象可以与服务器交互数据
    主流W3C标准浏览器都支持XMLHttpRequest对象(ajax对象)
     
    低版本的IE浏览器(IE5 和 IE6) 使用 ActiveXObject
     

    1.创建ajax对象

    if(window.XMLHttpRequest){ // 非IE5 IE6
        var xhr=new XMLHttpRequest();
    }else{ // IE5 IE6
        var xhr=new ActiveXObject("Microsoft.XMLHTTP");
    };
     

    2.连接服务器

    xhr.open(method,url,async);
    参数 说明:
    method:请求的类型 get 或 post
    url:文件在服务器上的位置
    async:可选,默认true(异步), false(同步)
    同步需要等待返回结果才能继续,异步不必等待
    通常使用异步(true),不推荐使用同步(false)
     
     

    3.将请求发送到服务器

    xhr.send(param);
    param:对于get请求,参数为空或null
     
     
    为post请求时,需要在send()之前设置http请求头:作用是模拟表单post来传递参数
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
     

    get和post区别

        * get参数通过url传递,post放在请求体(request body)中;
        * get请求在url传递的参数有长度限制,而post没有;
        * get比post更不安全,因为参数直接显示在url地址中,所以不能传递敏感数据;
        * get请求浏览器会主动缓存,而post不会;
        * get请求参数会保存在浏览历史记录,而post请求不会;
        * get和post本质上都是tcp连接。
     

    4.服务器响应情况

    readyState 属性存有XMLHttpRequest对象的状态
    readyState 会从 0 到 4 发生变化:
    0: 请求未初始化   1: 服务器连接已建立   2: 请求已接收   
    3: 请求处理中      4: 请求已完成
    当 readyState 改变时就会触发 onreadystatechange 事件
     
    status:http请求的状态码
    状态码代表着http请求是成功还是失败等信息。
    下面是常见的HTTP状态码(HTTP Status Code):
        * 200:请求成功
        * 301:网页被重定向到其它URL
        * 304:文件未被修改,使用缓存资源
        * 404:找不到此网页(指定的资源)
        * 500:服务器内部错误
     
    当readyState为 4 且 status为 200 时,表示响应已就绪,请求成功
    xhr.onreadystatechange=function (){
        if (xhr.readyState==4) { // 请求完成
            if (xhr.status==200) { //ok 成功
                alert( xhr.responseText ); // 得到响应结果
            } else{
                alert( xhr.status ); // 弹出失败的状态码
            };
        };
    }
     
    xhr.responseText  获得文本形式的响应数据
    xhr.responseXML  获得 XML 形式的响应数据
     
     
     
     
     
     
     
    集思广益,仅供学习,侵权即删!!
  • 相关阅读:
    iscroll中使用input框的话是导致无法选中input框
    JS中setInterval()和clearInterval()的使用以及注意事项
    连接oracle出现的问题以及解决办法
    Oracle数据库数据显示乱码问题解决方法。
    Android4.4以上Uri转换成绝对路径的工具类
    安卓,调用相机并适配6.0后
    问题-解决
    ORACLE相关
    PL/SQL表结构/数据的导出
    springMVC笔记
  • 原文地址:https://www.cnblogs.com/hudunyu/p/11427431.html
Copyright © 2020-2023  润新知