AJAX基础

作者: 廖马儿 | 来源:发表于2016-08-24 18:26 被阅读110次

    1.AJAX 简介:
    AJAX = Asynchronous JavaScript and XML(异步的 JavaScriptXML)。
    AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
    AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

    2.什么是 AJAX ?
    AJAX = 异步 JavaScriptXML
    AJAX 是一种用于创建快速动态网页的技术。
    通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
    传统的网页(不使用AJAX)如果需要更新内容,必需重载整个网页面。

    3.AJAX是基于现有的Internet标准
    AJAX是基于现有的Internet标准,并且联合使用它们:
    XMLHttpRequest 对象 (异步的与服务器交换数据)
    JavaScript/DOM (信息显示/交互)
    CSS (给数据定义样式)
    XML (作为转换数据的格式)

    AJAX应用程序与浏览器和平台无关的!

    4.在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。
    Google Suggest 使用AJAX创造出动态性极强的web 界面:当您在谷歌的搜索框输入关键字时,avaScript 会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。

    5.AJAX - 创建 XMLHttpRequest 对象
    XMLHttpRequestAJAX 的基础。

    所有现代浏览器均支持XMLHttpRequest对象(IE5IE6 使用 ActiveXObject)。
    XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    6.AJAX - 向服务器发送请求请求
    XMLHttpRequest 对象用于和服务器交换数据。

    如需将请求发送到服务器,我们使用XMLHttpRequest对象的 open()send()方法:
    xmlhttp.open("GET","ajax_info.txt",true);
    xmlhttp.send();

    open(*method*,*url*,*async*);

    规定请求的类型、URL 以及是否异步处理请求。
    method:请求的类型;GETPOST
    url:文件在服务器上的位置
    asynctrue(异步)或false(同步)

    send(string)
    将请求发送到服务器。
    string:仅用于POST 请求

    7.GET 还是 POST?
    POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
    然而,在以下情况中,请使用POST 请求:
    无法使用缓存文件(更新服务器上的文件或数据库)
    向服务器发送大量数据(POST没有数据量限制)
    发送包含未知字符的用户输入时,POSTGET 更稳定也更可靠

    8.ASP = Active Server Pages

    9.AJAX - 服务器 响应

    如需获得来自服务器的响应,请使用XMLHttpRequest 对象的 responseText(获得字符串形式的响应数据。) 或 responseXML 属性。(获得 XML形式的响应数据。)

    responseXML 属性

    xmlDoc=xmlhttp.responseXML;
    txt="";
    x=xmlDoc.getElementsByTagName("ARTIST");
    for (i=0;i<x.length;i++) {
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
    }
    document.getElementById("myDiv").innerHTML=txt;

    10.AJAX - onreadystatechange 事件

    onreadystatechange 事件
    当请求被发送到服务器时,我们需要执行一些基于响应的任务。
    每当 readyState改变时,就会触发onreadystatechange事件。
    readyState属性存有 XMLHttpRequest 的状态信息。

    readyState:
    存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
    0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成,且响应已就绪

    status:
    200: "OK"
    404: 未找到页面

    11.AJAX ASP/PHP 实例

    AJAX用于创造动态性更强的应用程序。

    "onkeyup"事件:在一个input type = ‘text’ 输入的时候,暂停输入 就会执行onkeyup事件

    格式:
    ASP:<% ... %>
    PHP:<? ... ?>

    12.AJAX Database 实例

    AJAX可用来与数据库进行动态通信。

    13.ajax的GET方法的数据必须在data里面传输,不能直接就在url参数中去写。

    $.ajax({
        
            type:'get',
            url:'/app01/index2/',
            data:params,
            success:success_func,
        })
        
        function success_func(){
        
        }
    

    相关文章

      网友评论

        本文标题:AJAX基础

        本文链接:https://www.haomeiwen.com/subject/bbrosttx.html