• Ajax


    1概念

    全称:Asynchronous Javascript And XML  ---异步的        js和xml(标记语言)       

    AJAX是使用js向服务器发送请求的技术;是浏览器端不用刷新整个页面就可以与服务器端通信的技术;

    包括:HTML,CSS用于呈现;    DOM实现动态显示和交互; Javascript绑定和处理所有数据;    XML和JSON进行数据交换与处理;  

              XMLHttpRequest(AJAX的核心对象)对象用于进行异步请求数据读取   --- AJAX的所有操作都是通过该对象来完成的

    2、XML(可扩展的标记语言,语法和HTML一致)

    XML是自定义标签,且语法比html严格; 而HTML的标签都是预定义的;如  h1 p div span ....

    在AJAX中默认情况是以XML作为响应数据的格式来接收数据的

    大多使用是JSON的格式

    同步请求、异步请求

    1. 传统web请求---同步请求

    传统的发送请求的方式都是同步请求:直接在地址栏输入地址---点击超链接---提交表单…同步请求在发送时,在响应返回前我们无法对网页做任何的操作       

    - 同步请求在响应返回前用户需要一直等待,不能做的任何操作

    - 同步请求一旦刷新就需要刷新整个页面,这样体验也不太好

    2. AJAX请求---异步请求

    异步请求在发送时,不会阻塞页面的其他部分,也就是说请求是通过浏览器的后台发送,不会对当前页面产生影响。

     并且当响应返回时,不需要刷新整个页面只需要刷新网页的局部    

      优点:

    1.Ajax采用异步的交互方式

    2. 彻底将页面与数据分离。

    3. 基于标准化的对象,不需要安装特定的插件, 浏览器都能支持Ajax

    3. 无需刷新整个页面, 减少用户等待时间, 提高用户体验。

    4. 减轻服务器的负担,AJAX一般只从服务器获取只需要的数据。

      缺点:

    1. 没有浏览历史, 无法通过回退按钮进行回退     2. 存在跨域请求问题 

    3. 对搜索引擎支持比较弱---页面与数据分离

       如何设置请求的同步或异步?

    request.open(method, url, true/false) 

     第3个参数   默认是true---异步   false---同步   

      同步请求与异步请求的区别?

    1). 执行: request.send()

    2). 异步: 此方法【立即返回】,后面立即获取请求的结果数据得不到, 只能在监听回调中获取(当结果数据返回后回调)

    3). 同步: 此方法不会立即返回, 只有在服务器返回结果才返回。

    不需要设置监听回调(在后面可以直接获取返回的结果数据)

    3、使用步骤:

    [一].创建XMLHttpRequest对象   

    eg:  var xhr = new XMLHttpRequest();

    var xhr = new ActiveXObject();  ---IE低版本

    [二].设置请求的信息.open(method, url,async,user,password)

    method ---get、post;

    注:发送get请求时,有些浏览器会使用缓存,也就是只在第一次访问时发送,再次访问就不发了,而是从缓存中加载数据,浏览器的缓存是根据请求地址来保存的,只有地址改变就不会使用缓存了,可以在地址后面写随机数

    url ---请求的地址,可以附加查询字符串

    async---布尔值,是否发送异步请求,默认true,一般不传

     <Ctrl+点击open 查看其源码>

    * post请求才可以指定发送数据:   name1=value1&name2=value2

    * 如果是post请求,需要通过请求体发送请求参数的,还需要设置如下一个请求头:

    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    [三].发送请求 xhr.send("请求体");

    [四].接收响应

    xhr.onreadystatechange = function(){ 

            if(xhr.readyState == 4 && xhr.status == 200){

                      console.log(xhr.responseText)  ---获取文本格式的响应

                      console.log(xhr.responseXML)  ---获取XML格式的响应

            }

    };    

    xhr.readyState ==数字  ---查看当前请求的状态

    0:请求未初始化(xhr对象刚建立);1:服务器连接已建立

    2:请求已接收; 3:请求处理中  4:请求已完成,且响应已就绪

    xhr.onreadystatechange用来监听readyState的改变,会在readyState发送变化时触发

    xhr.status == 数字

    200: "OK";           304:请求重定向,重定向到缓存;  

    404:请求路径未找到   500:服务器错误(前端人员的福音)

    u  jQuery中的AJAX   $.ajax()   $.get()   $.post()   $.getJson()

    eg :  $.ajax({

            type:get/post ;   url: ‘/地址 ’;    data:’请求参数’;

            success:function(msg){   请求成功以后调用  --msg 形参 实参是成功以后的数据

            alert(msg)

    }

    })

    $.get("/tool6" ,function (data) {})

            $.post("/tool6",{username : "baobao"},function (data) {})

  • 相关阅读:
    C++ Primer 有感(异常处理)(二)
    C++ Primer 有感(异常处理)
    C++ Primer 有感(多重继承与虚继承)
    C++ Primer 有感(面向对象编程)
    C++ Primer 有感(重载操作符)
    yii小部件
    [BAT]通过schtasks.exe远程调用windows 2008 server上的计划任务,提示ERROR : Access is denied
    [BAT]远程执行或停止计划任务
    [Jmeter]通过批处理调用java,java从CSV动态读取登录的用户名和密码,并将其作为参数组合成字符串,写入外部.bat文件,然后通过Java执行这个外部批处理文件
    [Jmeter]Xpath获取元素某个属性的值,以及获取最后一个元素某个属性的值
  • 原文地址:https://www.cnblogs.com/renzm0318/p/8971130.html
Copyright © 2020-2023  润新知