zoukankan      html  css  js  c++  java
  • JQuery学习笔记(4)——ajax

     

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)

    原生

    例子

    点击按钮,访问服务器上的ajax_info.txt文件,获得txt文件的内容,并修改显示的文本

    <!DOCTYPE html>
    <html>
    <head>
    <script>
        var xmlhttp;//xmlhttp对象
        function loadXMLDoc(url,cfunc){
            //不同的浏览器,或得xmlhttp对象所调用的方法不同
            if (window.XMLHttpRequest){
                // IE7+, Firefox, Chrome, Opera, Safari 
                xmlhttp=new XMLHttpRequest();
            }else{
                // IE6, IE5 
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            //回调函数
            xmlhttp.onreadystatechange=cfunc;
            xmlhttp.open("GET",url,true);
            xmlhttp.send();
        }
        function myFunction(){
            //访问服务器上的/try/ajax/ajax_info.txt,并回调函数
            loadXMLDoc("/try/ajax/ajax_info.txt",function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            });
        }
    </script>
    </head>
    <body>
    
    <div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div>
    <button type="button" onclick="myFunction()">修改内容</button>
    
    </body>
    </html>

    参考链接菜鸟教程

    XMLHttpRequest对象

    ajax的核心对象,是服务器和客户端中间的桥梁,客户端向服务器发送请求和客户端获得服务器响应都是通过此对象的属性和方法来进行。

    var xmlhttp;
    //window.XMLHttpRequest不为空,就是true
    if (window.XMLHttpRequest){
        // IE7+, Firefox, Chrome, Opera, Safari 
        xmlhttp=new XMLHttpRequest();
    }else{// IE6, IE5 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    发送请求

    • open(method,url,async) 连接服务器
      • method:请求的类型;GET 或 POST
      • url:文件在服务器上的位置
      • async:true(异步)或 false(同步),推荐使用异步
    • send(string) 发送请求
      如果请求方式为get,send中的参数可以省略不写

    onreadystatechange事件

    xmlhttp对象有两个属性readyStatestatus

    readyState发生改变,就会触发onreadystatechange事件

    readyState有以下几种状态

    • 0: 请求未初始化
    • 1: 服务器连接已建立
    • 2: 请求已接收
    • 3: 请求处理中
    • 4: 请求已完成,且响应已就绪

    status有两种状态

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

    服务器响应

    使用 XMLHttpRequest 对象的 responseTextresponseXML属性可以获得来自服务器的响应数据

    • responseText 获得字符串形式的响应数据。
    • responseXML 获得 XML 形式的响应数据。

    JQuery实现ajax

    1. $.ajax(url,[settings])

    最基本的ajax方法

    2. load(url,[data],[callback])

    从服务器载入数据并且将返回的HTML代码并插入至匹配的元素中。
    data是传递给服务器的数据参数 ,可以是一个普通的对象或字符串
    提供了一个回调函数complete(responseText, textStatus, XMLHttpRequest),当HTML代码并插入至匹配的元素中就会被调用

    $('#mydiv').load("test.html");
    
    //这里的first.html是当前同级目录的一个html文件
    $('#mydiv').load('first.html',function (data,status) {
        console.log(data);
        console.log(status);//状态,成功为success,失败则为error
    });

    3. $.get(url,[data],[fn],[type])

    使用一个HTTP GET请求从服务器加载数据

    //这里实现的效果与上面的load一致
    $.get("first.html",function(data){
        $('#mydiv').html("test.html");
    });

    4. $.post(url,[data],[fn],[type])

    使用一个HTTP POST请求从服务器加载数据,与上面get类似

    5. $.getJSON(url,[data],[fn])

    获得json数据并自动解析自动解析

    $.getJSON("test.js", function(json){
        console.log(json.users[3].name);
    });

    6. $.getScript(url,[callback])

    使用一个HTTP GET请求从服务器加载并执行一个 JavaScript 文件

    参考链接:jQuery文档

  • 相关阅读:
    jsp servlet table 集合list 数据 绑定
    Linux下“/”和“~”的区别
    android 百度地图 定位获取位置失败 62错误
    PostgreSQL 空间数据类型point、 line等
    PostgreSQL 与 PostGIS
    MySQL及navicat for mysql中文乱码
    eclipse报错:Multiple annotations found at this line:
    Multiple markers at this line
    css中绝对定位和相对定位的区别
    关于display的属性:block和inline-block以及inline的区别,float相关说明
  • 原文地址:https://www.cnblogs.com/chaoyang123/p/11549775.html
Copyright © 2011-2022 走看看