淘先锋技术网

首页 1 2 3 4 5 6 7

前言

在这里插入图片描述

本文为Ajax简介与基本使用相关知识,首先将对Ajax进行简介(包含:什么是AjaxAjax的作用Ajax的好处),然后介绍JS方式Ajax的实现(包含发送 Ajax 请求的五个步骤创建 XMLHttpRequest 对象向服务器发送请求服务器响应等),最后介绍jQuery框架中的Ajax(具体包含:jQuery框架的Ajax简介$.ajax()方法$.get()方法$.post()方法等)。

📌博主主页:小新要变强 的主页
👉Java全栈学习路线可参考:【Java全栈学习路线】最全的Java学习路线及知识清单,Java自学方向指引,内含最全Java全栈学习技术清单~
👉算法刷题路线可参考:算法刷题路线总结与相关资料分享,内含最详尽的算法刷题路线指南及相关资料分享~
👉Java微服务开源项目可参考:企业级Java微服务开源项目(开源框架,用于学习、毕设、公司项目、私活等,减少开发工作,让您只关注业务!)


目录

在这里插入图片描述

一、Ajax简介

1️⃣什么是Ajax

  • Ajax即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
  • Ajax = 异步 JavaScript 和 XML 或者是 HTML(标准通用标记语言的子集)。
  • Ajax 是一种用于创建快速动态网页的技术。
  • Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
  • 通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
  • 传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

2️⃣Ajax的作用

Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,部分更新。

3️⃣Ajax的好处

  • 减轻服务器负担,按需要获得数据
  • 无刷新更新页面,减少用户实际和心理的等待时间
  • 只更新部分页面,有效利用带宽
  • 主流浏览器都支持Ajax

二、JS方式Ajax的实现

JS的Ajax:出现最早,使用一个对象XmlHttpRequest对象。专门用于进行Ajax请求发送,和响应的接收使用Ajax发请求,使用Ajax接收响应,使用JS进行页面刷新。

存在的缺点:

  • 若使用JS的Ajax技术,为了实现简单功能,需要书写大量复制代码
  • JS的Ajax代码,浏览器兼容性比较差

1️⃣发送 Ajax 请求的五个步骤

其实也就是 使用 XMLHttpRequest 对象的五个步骤。

  • 请求的网址、请求方法get/post。
  • 提交请求的内容数据、请求主体等。
  • 接收响应回来的内容。

发送 Ajax 请求的五个步骤:

  • (1)创建异步对象。即 XMLHttpRequest 对象。
  • (2)设置请求的参数。包括:请求的方法、请求的url。
  • (3)发送请求。
  • (4)注册事件。onreadystatechange事件,状态改变时就会调用。如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。
  • (5)获取返回的数据。

2️⃣创建 XMLHttpRequest 对象

所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。

创建XMLHttpRequest对象的语法:

3️⃣向服务器发送请求

XMLHttpRequest对象用于和服务器交换数据。如需将请求发送到服务器,我们使用XMLHttpRequest对象的open()和send()方法。

方法描述参数
open(method,url,async)规定请求的类型、URL 以及是否异步处理请求method:请求的方式,GET或POST;url:请求路径;async:true(异步)或 false(同步)
send(string)将请求发送到服务器string:请求参数,仅用于POST请求。格式:名1=值1&名2=值2

🍀GET请求

一个简单的GET请求:

xmlhttp.open("GET","DemoAJAXServlet",true);
xmlhttp.send();

🍀POST请求

一个简单POST请求:

xmlhttp.open("POST","DemoAJAXServlet",true);
xmlhttp.send();

如果需要像HTML表单那样POST数据,请使用setRequestHeader()来添加HTTP头。然后在send()方法中填写发送的数据:

xmlhttp.open("POST","DemoAJAXServlet",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=tom&age=20");

4️⃣服务器响应

获得来自服务器的响应,使用XMLHttpRequest对象的responseText或responseXML属性。

请求被发送到服务器时,需要执行一些基于响应的任务。每当readyState改变时,就会触发onreadystatechange事件。readyState属性存有XMLHttpRequest的状态信息。

下面是XMLHttpRequest对象的三个重要的属性:

属性描述
onreadystatechange状态改变事件触发器,每当readyState属性改变时,就会调用该函数
readyState存有XMLHttpRequest的状态。从0到4发生变化。0: 请求未初始化;1: 服务器连接已建立;2: 请求已接收;3: 请求处理中;4: 请求已完成,且响应已就绪
status响应状态码。200: 成功;404: 未找到页面

在onreadystatechange事件中,当readyState等于4且状态为200时,表示响应已就绪:

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

5️⃣代码实现

//1.创建ajax核心对象XMLHttpRequest
var ajax = new XMLHttpRequest();
//2.与服务器建立连接
ajax.open("post","testAjax");
//3.设置请求头,如果请求方式为post,请求头必须设置
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.注册事件监听,监听服务器端对象状态的改变
//作用:服务器处理之后,响应客户端,通过此函数来接收响应的数据,此后在ajax中此函数被称为回调函数
ajax.onreadystatechange = function(){
  //判断服务器对象的状态是否为完成状态
  if(ajax.readyState == 4){ //4表示服务器完成
    //判断服务器是否处理成功
    if(ajax.status == 200){ //200响应状态码,表示处理成功
      alert("响应回的数据:" + ajax.responseText);
    }else {
      alert("处理失败:" + ajax.status);
    }
  }
}
//5.发送请求
var name = document.getElementById("name").value;
ajax.send("name="+name);

三、jQuery中的Ajax

1️⃣jQuery框架的Ajax简介

jQuery是一个优秀的JS框架,对JS原生的Ajax进行了封装。
与Ajax操作相关的jQuery方法在开发中经常使用的有三种:POST、GET、AJAX

2️⃣$.ajax()方法

$ .ajax()方法用于执行AJAX异步请求。所有的jQuery AJAX方法都使用$ .ajax()方法。该方法通常用于其他方法不能完成的请求。

语法:

该参数规定AJAX请求的一个或多个名称/值对。下面的表格中列出了可能的名称/值:

名称描述
asyncBoolean表示请求是否异步处理。默认true
beforeSend(xhr)Function发送请求前运行的函数。
cacheBoolean表示浏览器是否缓存被请求页面。默认true
complete(xhr,status)Function请求完成时运行的函数(在请求成功或失败之后均调用,即在success和error函数之后)
contentTypeString发送数据到服务器时所使用的内容类型。默认是:”application/x-www-form-urlencoded”
contextObject为所有AJAX相关的回调函数规定 “this” 值
dataObject,String规定要发送到服务器的数据
dataFilter(data,type)Function用于处理XMLHttpRequest原始响应数据的函数
dataTypeString预期的服务器响应的数据类型。text:返回纯文本字符串;json:返回JSON数据
error(xhr,status,error)Function如果请求失败要运行的函数
globalBoolean规定是否为请求触发全局AJAX事件处理程序。默认true
ifModifiedBoolean规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认false
jsonpString在一个jsonp中重写回调函数的字符串
jsonpCallbackString在一个jsonp中规定回调函数的名称
passwordString规定在HTTP访问认证请求中使用的密码
processDataBoolean规定通过请求发送的数据是否转换为查询字符串。默认true
scriptCharsetString规定请求的字符集
success(result,status,xhr)Function,Array当请求成功时运行的函数
timeoutNumber设置本地的请求超时时间(以毫秒计)
traditionalBoolean规定是否使用参数序列化的传统样式
typeString规定请求的类型(GET或POST)
urlString规定发送请求的URL。默认是当前页面
usernameString规定在HTTP访问认证请求中使用的用户名
xhrFunction用于创建XMLHttpRequest对象的函数

代码示例:

$.ajax({
  url : "checkUsername",
  type : "post",
  dataType : "text",
  data : "username="+$("#username").val(),
  beforeSend : function(){
    if($("#username").val()==""){
      alert("用户名不能为空");
      return false;
    }
    return true;
  },
  success : function(data){
    alert(data);
  }
});

3️⃣$.get()方法

$.get()方法通过HTTP GET请求从服务器上请求数据。

语法:

参数解析:

  • URL:请求的路径地址,必需项
  • data:发送Key/value请求参数
  • callback:请求成功后所执行的回调函数
  • type:返回内容格式,xml, html, script, json, text, _default

代码示例:

$.get("checkUsername",{ username : $("#username").val() },function(data){
  alert(data);
});

4️⃣$.post()方法

$.post()方法通过HTTP POST请求从服务器上请求数据。

语法:

参数解析:

  • URL:请求的路径地址,必需项
  • data:发送Key/value请求参数
  • callback:请求成功后所执行的回调函数
  • type:返回内容格式,xml, html, script, json, text, _default

代码示例:

$.post("checkUsername",{ username : $("#username").val() },function(data){
  alert(data);
});

后记

在这里插入图片描述

👉Java全栈学习路线可参考:【Java全栈学习路线】最全的Java学习路线及知识清单,Java自学方向指引,内含最全Java全栈学习技术清单~
👉算法刷题路线可参考:算法刷题路线总结与相关资料分享,内含最详尽的算法刷题路线指南及相关资料分享~