返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何理解ajax
  • 473
分享到

如何理解ajax

2024-04-02 19:04:59 473人浏览 安东尼
摘要

这篇文章将为大家详细讲解有关如何理解ajax,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。什么是AjaxAjax是Asynchronous javascri

这篇文章将为大家详细讲解有关如何理解ajax,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

什么是Ajax

Ajax是Asynchronous javascript and XML的缩写,这一技术能够向服务器请求额外的数据而无需卸载整个页面,会带来良好的用户体验。传统的Http请求流程大概是这样的,浏览器向服务器发送请求-〉服务器根据浏览器传来数据生成response-〉服务器把response返回给浏览器-〉浏览器刷新整个页面显示最新数据,这个过程是同步的,顺序执行。

AJAX 在浏览器与 WEB 服务器之间使用异步数据传输(HTTP 请求)从服务器获取数据,这里的异步是指脱离当前浏览器页面的请求、加载等单独执行,这意味着可以在不重新加载整个网页的情况下,通过JavaScript接受服务器传来的数据,然后操作DOM将新数据对网页的某部分进行更新,使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待了。

ajax的理解(一)

Ajax是Asynchronous Javascript And XML的缩写。 作用:通过Ajax可以使用Javascript语句来调用XMLHttpRequest对象,直接与服务器进行通讯,可以在不重载页面的情况下与服务器交换数据。 1、创建XML

Ajax是Asynchronous Javascript And XML的缩写。

作用:通过Ajax可以使用Javascript语句来调用XMLHttpRequest对象,直接与服务器进行通讯,可以在不重载页面的情况下与服务器交换数据。

1、创建XMLHttpRequest对象

    var xhr =  new XMLHttpRequest()

对于IE早期版本(IE7及以下版本)使用,new ActiveXObject(\"Microsoft.XMLHTTP\")、new ActiveXObject(\"Msxml2.XMLHTTP\")等方式创建对象

2、XMLHttpRequest对象常用属性和常用方法

    属性

    readystate       返回XMLHTTP请求的当前状态码
    state               返回当前请求的HTTP状态码
    statusText       返回HTTP状态码对应的文本

    方法

    onreadystatechange    监听readystate和state状态

ajax的理解(二)

ajax方法:通过 HTTP 请求加载远程数据
get方法: 通过远程 HTTP GET 请求载入信息
post方法:通过远程 HTTP POST 请求载入信息

1、创建XMLHttpRequest对象

function createXHR() {
   return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
}

2、将键值对转换成拼接串

  function params(data) {
   var a = [];
   for (var i in data) {
    a.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));
   }
   return a.join("&");
  }

3、封装ajax方法

    参数

method       请求方法      get和post          默认get
  data            键值对         {key:value}
  url               链接地址
  cache           缓存           true   和  false    默认true带缓存
  success       成功             error           异常

function ajax(args) {
   var xhr = createXHR();
   var data = http://www.cnblogs.com/kuikui/arcHive/2012/01/12/params(args.data);
   if (/get/i.test(args.method)) { // 当为get方式时 将data直接拼接到url后
    args.url += "?" + data;
   }
   if (!args.cache) {  //无缓存
    if (args.url.indexOf("?") < 0) { //当无参数data
     args.url += "?";
    }
    args.url += "&" + (new Date()); // Math.random();
   }
   xhr.open(args.method, args.url, true);
   xhr.onreadystatechange = function () {
    if (4 == xhr.readyState && 200 == xhr.status) {
     args.success(xhr.responseText, xhr.responseXML);
    }
    else {
     args.error();
    }
   }
   if (/post/i.test(args.method)) {
    xhr.setRequestHeader("Content-Type", "application/x-www-fORM-urlencoded");
    xhr.send(data);
   }
   else {
    xhr.send();

关于如何理解ajax就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

--结束END--

本文标题: 如何理解ajax

本文链接: https://www.lsjlt.com/news/81740.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何理解ajax
    这篇文章将为大家详细讲解有关如何理解ajax,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。什么是AjaxAjax是Asynchronous JavaScri...
    99+
    2024-04-02
  • 如何理解Ajax核心XMLHttpRequest
    这篇文章主要讲解了“如何理解Ajax核心XMLHttpRequest”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何理解Ajax核心XMLHttpRequ...
    99+
    2024-04-02
  • 如何理解ajax跨域请求
    本篇内容介绍了“如何理解ajax跨域请求”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!同源策略限制同源策略...
    99+
    2024-04-02
  • 如何理解AJAX开发技术
    本篇内容介绍了“如何理解AJAX开发技术”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!AJAX(Async...
    99+
    2024-04-02
  • 如何理解jQuery中ajax - get()方法
    这期内容当中小编将会给大家带来有关如何理解jQuery中ajax - get()方法,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。在jquery中使用get,post和a...
    99+
    2024-04-02
  • 如何理解ajax完整功能框架
    本篇内容主要讲解“如何理解ajax完整功能框架”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何理解ajax完整功能框架”吧!记得有篇文章数落AJAX的&quo...
    99+
    2024-04-02
  • 如何理解ajax struts2 下拉框赋值
    这篇文章给大家介绍如何理解ajax struts2 下拉框赋值,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。 1.此代码适合所有下拉列表取值 2.一个项目...
    99+
    2024-04-02
  • 如何理解ASP.NET与Ajax的实现方式
    如何理解ASP.NET与Ajax的实现方式,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。Ajax 应该不是一项技术,是一种思想而已,跟 ASP.NET 以及其它...
    99+
    2023-06-17
  • Struts2如何处理AJAX请求
    本文小编为大家详细介绍“Struts2如何处理AJAX请求”,内容详细,步骤清晰,细节处理妥当,希望这篇“Struts2如何处理AJAX请求”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新...
    99+
    2024-04-02
  • 如何理解Ajax跨域Session和跨域访问
    这篇文章主要讲解了“如何理解Ajax跨域Session和跨域访问”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何理解Ajax跨域Session和跨域访问”...
    99+
    2024-04-02
  • 基于Java的Ajax框架ZK该如何理解
    这期内容当中小编将会给大家带来有关基于Java的Ajax框架ZK该如何理解,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。ZK是一套以 AJAX/XUL/Java 为基础的网页应用程式开发框架,用于丰富网页...
    99+
    2023-06-17
  • Ajax报错400如何解决
    这篇文章给大家介绍Ajax报错400如何解决,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。Failed to load resource: the server responded with a status of 4...
    99+
    2023-06-08
  • 如何理解ECMAScript基础类以及Asp.net Ajax对类
    这篇文章主要讲解了“如何理解ECMAScript基础类以及Asp.net Ajax对类”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何理解ECMAScri...
    99+
    2024-04-02
  • 如何解决ajax的get请求时的缓存处理
    这篇文章主要介绍“如何解决ajax的get请求时的缓存处理”,在日常操作中,相信很多人在如何解决ajax的get请求时的缓存处理问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2024-04-02
  • 如何解决Ajax缓存问题
    这篇文章主要介绍“如何解决Ajax缓存问题”,在日常操作中,相信很多人在如何解决Ajax缓存问题问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何解决Ajax缓存问题”的疑惑...
    99+
    2024-04-02
  • ajax如何解决跨域问题
    小编给大家分享一下ajax如何解决跨域问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!跨域同源策略限制同源策略阻止从一个域上加...
    99+
    2024-04-02
  • ajax如何解决缓存问题
    这篇文章主要介绍ajax如何解决缓存问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 这样是为了减少频繁访问服务器对其造成不必要的负担,但是同时也带来...
    99+
    2024-04-02
  • Ajax跨域问题如何解决
    这期内容当中小编将会给大家带来有关Ajax跨域问题如何解决,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。跨域跨域有三个条件,满足任何一个条件就是跨域 1:服务器端口不一致 2:协议不一...
    99+
    2023-06-08
  • jquery ajax报错403如何解决
    本篇内容介绍了“jquery ajax报错403如何解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!jquery ajax报错403是因为...
    99+
    2023-07-04
  • 如何使用Servlet处理AJAX请求
    本文小编为大家详细介绍“如何使用Servlet处理AJAX请求”,内容详细,步骤清晰,细节处理妥当,希望这篇“如何使用Servlet处理AJAX请求”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作