AJAX简介

傅干
• 阅读 92

AJAX,全称为"Asynchronous JavaScript and XML",是一种在无需重新加载整个网页的情况下,能够与服务器交换数据并更新部分网页的技术。AJAX并不是一种全新的编程语言,而是一种使用现有标准的新方法,通过组合使用不同的技术,AJAX 提供了创建更好、更快且更用户友好的网络应用程序的可能性。

  1. 背景与起源

在传统的网页浏览中,每当用户与网页进行交互,如填写表单、点击按钮等,浏览器都会向服务器发送请求,服务器处理请求后返回一个新的页面。这种方式下,每当数据更新,用户都需要等待整个页面的重新加载,这导致了页面加载速度慢、用户体验差等问题。

为了解决这些问题,AJAX 技术应运而生。它允许网页在不重新加载整个页面的情况下,通过后台向服务器发送请求并处理响应,从而实现了页面的动态更新。

  1. 工作原理

AJAX 的核心是 XMLHttpRequest 对象。当用户在网页上执行某些操作时,JavaScript 代码会创建一个 XMLHttpRequest 对象,并使用它来向服务器发送异步请求。服务器处理请求后返回数据,JavaScript 代码再使用这些数据来更新网页的某一部分。

这个过程是异步的,意味着它不会阻止用户继续与网页交互。用户可以在等待服务器响应时继续浏览或进行其他操作。

  1. AJAX 请求方法( Method )

GET 、 POST 、 PUT 、 PACTH 、 DELETE 等

jQuery 中也有 AJAX 模块,该模块是在 XMLHttpRequest 的基础上进行了封装,语法( Syntax )
如下:

  $.ajax(  [settings  ]  )  -  默认用  GET  请求从服务器加载数据,  会返回  jQXHR  对象,可以利
用该对象的  abort  方法来取消请求。
    $.get(  url  [,  data  ]  [,  success  ]  [,  dataType  ]  )  -  发起  GET  请求,底层调用的还
是  $ajax()
    $.post(  url  [,  data  ]  [,  success  ]  [,  dataType  ]  )  -  发起  POST  请求,底层调用的
还是  $ajax() 
  1. load():

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

   $('selector').load('URL,data,callback');   
    必需的  *URL*  参数规定您希望加载的  URL。
    可选的  *data*  参数规定与请求一同发送的查询字符串键/值对集合。
    可选的  *callback*  参数是  load()  方法完成后所执行的函数名称。
  1. get() post():
    请求参数( Parameters )
 url  -  指定发送请求的  URL  。
    method  /  type  -  用于指定请求的类型  (e.g.  "POST",  "GET",  "PUT")  ,默认为  GET
    data  -  指定要发送到服务器的数据(  PlainObject  or  String  or  Array  )
    processData  :当  data  是一个对象时,  jQuery  从对象的键  /  值对生成数据字符串,除非该 
processData  选项设置为  false.  例如,  {  a:  "bc",  d:  "e,f"  }  被转换为字符串 
"a=bc&d=e%2Cf"  ,默认为  true  。
    headers  -  请求头的内容(  PlainObject  )


   contentType: 
        application/x-www-form-urlencoded;  charset=UTF-8  ,向服务器发送数据时指定内容
类型。请求体的数据以查询字符串形式提交,如:a=bc&d=e%2Cf  。
        application/json;  charset=UTF-8  指定为  json  字符串类型
        multipart/form-data  。表单类型,一般用于上传文件


  dataType  -  期望服务器端发回的数据类型(  json  、  xml  、  text...  ),默认会根据响应的类
型来自动推断类型。
    timeout  -  请求超时时间。它以毫秒为单位。
    beforeSend  -  这是一个在发送请求之前运行的函数,返回  false  会取消网路请求。
    success  -  请求成功回调的函数  状态码  200


   error  -  请求失败回调的函数 
        500  后台代码出错
        503  服务器维护
        403  没有权限获取资源
        404  没有找到资源
  1. AJAX有几种请求方式

6.1 使用“$.ajax()”创建XMLHttpRequest对象。通过这个方式,你可以进行远程HTTP GET或POST请求以载入数据。你可以指定请求类型(如GET、POST)、数据类型、URL以及请求成功或失败时的回调函数。

6.2 另一种方式是使用简单的GET请求。这种方式适用于简单的GET请求,请求成功时可以调用回调函数。
6.3 还可以使用HTTP POST请求来载入数据。这种方式也适用于POST请求,请求成功时可以调用回调函数。
通过HTTP GET请求载入JSON数据。

点赞
收藏
评论区
推荐文章
皮卡皮卡皮 皮卡皮卡皮
4年前
ajax
ajax定义:异步的JavaScript和XML是一种综合技术:运用了XMLHTTPRequest(xhr)和服务器交换数据,通过JavaScript局部渲染页面,从而实现异步的局部更新同步与异步同步代码按顺序执行,会阻塞代码执行(alert)异步不会阻塞代码XMLHTTPRequestxhrjsvarxhrnew
Wesley13 Wesley13
3年前
java第五周
AJAX的工作原理及其工作原理:1.定义及工作原理  AJAXAsynchronousJavaScriptandXML(异步的JavaScript和XML)。AJAX不是新的编程语言,而是一种使用现有标准的新方法。AJAX不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。  AJAX是一种用于
Stella981 Stella981
3年前
AjaxPro.dll,asp.net 前台js调用后台方法(无刷新)
1、什么是AjaxAjax是异步Javascript和XML(AsynchronousJavaScriptandXML)的英文缩写。"Ajax"这个名词的发明人是JesseJamesGarrett,而大力推广并且使Ajax技术炙手可热的是Google。Ajax的核心理念在于使用XMLHttpRequest对象发送异步请求。
Stella981 Stella981
3年前
AJAX与Django
AJAX什么是AJAX?AJAX不是JavaScript的规范,它的缩写:AsynchronousJavaScriptandXML,意思就是用JavaScript执行异步网络请求。提交任务之后,不原地等待,直接执行下一行代码,任务的返回通过回调机制。局部刷新,不整体刷新,而是界面莫个地方局部刷新AJAX原理
Stella981 Stella981
3年前
Django框架 之 Ajax
Django框架之Ajax浏览目录AJAX准备知识AJAX与XML的比较AJAX简介jQuery实现的ajaxAJAX参数AJAX请求如何设置csrf\_token序列化
Easter79 Easter79
3年前
SpringBoot2.x服务器端主动推送技术
一.服务端推送常用技术介绍  服务端主流推送技术:websocket、SSE等  1.客户端轮询:ajax定时拉取后台数据    js  setInterval定时函数  ajax异步加载 定时向服务器发送请求    服务器压力会较大  2.服务端主动推送:websocket《推荐使用》    全双工即双向通讯,本质上是一个
Stella981 Stella981
3年前
Django的日常
\toc\Django的日常AJAXAJAX简介首先AJAX是一种无需重新加载整个网页的前提下,能够更新部分网页的技术,他并不是一种新的编程语言,而是一种使用现有标准的新方法,是基于原生JavaScript开发的,他可以用于创建快速动态网页.AJAX最大的特点就是局部刷新以及异步提交,局部刷新
Stella981 Stella981
3年前
Ajax快速入门
最近需要使用ajax,json传数据,快速学习了下ajax,把基本的东西拿出来分享一下,打算以问题的形式来进行文章的编写~go!(一)什么是Ajax?Ajax是一种无需加载整个网页,快速刷新局部网页的技术。Ajax不是新的编程语言,而是一些老技术的融合。(二)Ajax用到了什么技术?异步数据获取技术:使用XMLHttpReques
Stella981 Stella981
3年前
Ajax异步请求
Ajax即"AsynchronousJavascriptAndXML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。Ajax异步JavaScript和XML(标准通用标记语言的子集)。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况
小万哥 小万哥
1年前
AJAX 前端开发利器:实现网页动态更新的核心技术
AJAXAJAX是开发者的梦想,因为你可以:在不重新加载页面的情况下更新网页在页面加载后请求来自服务器的数据在页面加载后接收来自服务器的数据在后台向服务器发送数据HTML页面html让AJAX更改这段文字更改内容HTML页面包含一个部分和一个部分用于显示来
liam liam
1年前
掌握 XML HttpRequest 的关键要点
技术是构建动态、响应式网站的关键。这项技术使得网页能在不重新加载整个页面的情况下与服务器进行数据交互,极大地优化了用户的交互体验。定义XMLHttpRequestXMLHttpRequest是一种浏览器与服务器进行数据交换的API。尽管它的名字包含“XML