zoukankan      html  css  js  c++  java
  • 前端随心记---------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 形式的响应数据
     
     
     
     
     
     
     
    集思广益,仅供学习,侵权即删!!
  • 相关阅读:
    电力行业网络监控IT运维管理解决方案
    卫星互联网网络监控运维天地一体化管理方案
    【活动预告】七牛云数据科学家携手众大咖,深度解读大数据价值
    【技术猩球】乘云而上的数据库,在数据中寻找确定性
    华为 CodeConf 2020:七牛云陈超谈「开源」虽道阻且长,但需迎难而上
    【干货分享】陈超:七牛云机器数据分析平台 Pandora 最佳实践
    【技术猩球】开源啦! Go 语言系统测试覆盖率收集利器 goc
    七牛云视频监控:助你挑对礼物,消灭「孤寡青蛙」
    【七牛云视频监控】贝鲁特爆炸警示录:安全生产容不得「意外火花」
    叮,有一份上云主机选型指南等待您签收!
  • 原文地址:https://www.cnblogs.com/hudunyu/p/11427431.html
Copyright © 2011-2022 走看看