Ajax_原生ajax写法、理解异步请求、js单线程+事件队列、封装原生ajax

1、原生Ajax

  一定要理解Ajax出现的背景

  Ajax通过url查询后端接口的数据,在前端做数据的解析和局部更新

  1、隐藏帧iframe方式实现页面局部更新---只是为了比较好的用户体验

     访问后台接口数据显示在iframe页面中显示,没有做主页面的刷新,但页面实际上也刷新了  看左上角的转圈圈了

    

    

    

    2、Ajax异步请求,真正实现页面局部刷新,没有跳转,坐上角小圈圈没转

      原生Ajax写法---注意ajax的缩写

      

      

      

      

      

      

      

      

      

  3、服务器放回了xml数据格式

      

      

      解析过程还是很麻烦的,所以这种数据格式很少用了。

  4、后台返回数据主流数据风格:json格式数据

     

     

     

     

     

     做一个json格式的接口(其实就是调用url后返回的是数据、json格式的数据,不是完整的页面)

     

     

   5、ajax异步请求

      

    js的执行:  单线程(从上往下一行行解析执行) + 事件队列(代码从上往下执行完后,事件队列里的方法是再右浏览器处理的)

    

    

    

    

  6、Ajax原生封装

    

    

    

      

      

      

      

    

      

原文地址:https://www.cnblogs.com/yangyutian/p/10961249.html

时间: 2024-12-13 16:31:50

Ajax_原生ajax写法、理解异步请求、js单线程+事件队列、封装原生ajax的相关文章

jQuery基础(Ajax,load(),getJSON(),getScript(),post(),ajax(),同步/异步请求数据)

1.使用load()方法异步请求数据 使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[callback]) 参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数. 2.使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数据,并对获取的数据进行解析,显示在页面中,它的

jQuery框架+DWR框架实现的Java Web中的Ajax效果(异步请求,局部刷新)

一 简介和实现效果 这里用一个小例子来简单举例说明,做一个搜索引擎搜索提示效果,通过不断输入字符,然后在下方给出搜索提示.效果图如下: 通过上图可以看到,当输入一个"a"时,提示了很多内容,然后继续输入一个"e"后,提示的范围明显就变小了. 注:在文末我会给出完整源代码的下载链接,以供大家参考 二 具体实现 1 在eclipse for java ee中创建一个Java Web工程,然后导入相应的jar包,特别说明的是:这里要导入一个额外的dwr.jar.也就是说,

Ajax与ashx异步请求的简单案例

Ajax与ashx异步请求的简单案例: 前台页面(aspx): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=

使用AJAX技术发送异步请求,HTTP服务端推送

使用AJAX技术发送异步请求 什么是AJAX AJAX指一步Javascript和XML(Asynchronous JavaScript And XML),它是一些列技术的组合,简单来说AJAX基于XMLHttpRequest让我们在不重载页面的情况下和服务器进行数据交换. 加上JavaScript和DOM(Document Object Model,文档对象模型),我们就可以在接收到响应数据后局部更新页面.XML指的是数据的交互模式,可以是纯文本(Plain Text).HTML或JSON.

ajax 的同步异步 、js 的异步

同步:在程序运行的时候,是从上而下的,只要上面的代码没运行完成,会阻塞下面的代码运行,只有上面的程序执行完,下面的代码才会运行. 异步:上面的代码没运行完,不会阻塞下面的代码运行. xxx.open( ):例子:xxx.open("get","/sleep?name=" + encodeURI(this.value)+ "&id=" + Date.now(), true) 第一个参数:"get" 或者 "po

Ajax技术(异步请求)

Ajax技术 Ajax全称为Asynchronous Javascript And XML,它的核心技术是 XMLHttpRequest对象.指的是异步JavaScript和XML技术,是WEB 2.0中的一项关键技术,它允许把用户和WEB页面的交互性与web浏览器和服务器的通信分离开来. 他结合了CSS(Cascading Style Sheets 层叠样式表).HTML和DOM等多种技术,允许在客户端浏览器的ajax程序以异步的方式和web服务器通信,达到页面的局部更新效果,实现了丰富的用户

重写ajax方法实现异步请求session过期时跳转登录页面

jQuery(function($){ // 备份jquery的ajax方法 var _ajax=$.ajax; // 重写ajax方法, $.ajax=function(opt){ var _success = opt && opt.success || function(a, b){}; var _error = opt && opt.error || function(a, b){}; var _opt = $.extend(opt, { success:functi

使用JQuery 的$.ajax 方法进行异步请求,导致页面闪烁

情景 目前有个需求是在文本框填入内容,自动触发keyup事件,下拉列表会自动过滤相应的选项,但是使用了$,ajax后发现,每次触发事件时,都导致整个网页闪烁,触发了全局ajax事件 代码片段 $.ajax({ type: "POST", url: root + "/xxx, data: requestData, dataType: "json", success: function(data){ // 清空列表 $("#formOpinion #

Ajax:实现后台验证js实现get方式的异步请求,判断用户名是否重复

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html> <head> <title>ajax</title> <script src="/ajax/js/jquery-3.3.1.min.js"></script> </head> <body> <