首页 web前端 js教程 新手必看的Ajax技术组成与核心原理分析

新手必看的Ajax技术组成与核心原理分析

Apr 03, 2018 pm 04:34 PM
ajax 技术 组成

这次给大家带来新手必看的Ajax技术组成与核心原理分析,新手必看Ajax技术组成与核心原理分析的注意事项有哪些,下面就是实战案例,一起来看一下。

本文主要为大家分析了Ajax技术组成原理,供大家参考,具体内容如下

1、Ajax
特点:局部刷新、提高用户的体验度,数据从服务器商加载 

2、AJax的技术组成不是新技术,而是之前技术的整合
Ajax: Asynchronous Javascript And Xml;(异步的JavaScript和XML)
包括的技术:JavaScript、XML、CSS、XMLHttpRequest
异步:发送请求以后,不等结果,由回调函数处理。
JavaScript:向服务器发送请求,获得返回结果,更新页面
XML:用来封装数据 

3、Ajax核心原理XMLHttpRequst对象:通过该对象向服务器发送请求。
它是异步请求的技术,所有现代浏览器都支持(Chrome、IE5+)

1)创建XMLHttpReuest对象IE浏览器(Mozilla/Safari):var xhr=new XMLHttpRequest();
IE:xhr=new ActiveXObject("Msxml2.XMLHTTP");
低版本IE:xhr=new ActiveXObject("Microsfot.XMLHTTP");
2)XMLHttpRequest对象的属性与方法a)方法:open("GET/POST",URL,true/false):用来向服务器建立连接
有三个参数:
参数1:提交方式,post或get
参数2:请求的URL
参数3:表示同步或异步请求,true:表示异步请求
false: 表示同步请求
send(data):发送请求
参数:提交的内容。
POST方式:data就是提交的参数,send(username=root&password=abc123);
GET方式:send(null) 

b)属性:
onreadystatechange:设置状态改变时的回调函数,回调函数用来获取服务器数据。
onreadystatechange=function(){      
} 

readyState:服务器状态响应
状态码:0:未初始化
1:正在加载
2:加载完成
3:请求进行中
4:请求完成

responseText:服务器返回的数据(文本格式)
responseXML:服务器返回的数据(XML格式) 

总结:
 使用XMLHttpRequest的步骤:
   1)创建XMLHttpRequest对象
   2)设置请求的方法及URL
    xhr.open("GET/POST","url",true/false),true表示异步请求,false表示同步请求
   3)设置状态改变时的回调函数
     xhr.onreadystatechange=function(){}
    0:未初始化
     1:正在加载
     2:加载完成
     3:请求进行中
     4:请求完成
   4)发送请求
     xhr.send(data),
    如果为post提交,则data为提交的数据,如果为get提交,则参数为null即可。

判断用户登录的HTML页面:

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录</title>
</head>
<body>
  用户名:<input type="text" name="username" id="username"><br>
  密码:<input type="password" name="password" id="password">
  <a href="javascript:chkUser();">登录</a>
  <p id="res"></p>
</body>
<script type="text/javascript">
  var xhr;
  /**
  * 创建XMLHttpRequest对象
  */
 function createXMLHttpRequest(){
  //1、创建XMLHttpRequest对象
    if(window.XMLHttpRequest){
      //非IE内核浏览器
     xhr=new XMLHttpRequest(); 
    }else{
      //IE浏览器
      try{
        xhr=new ActiveXObject("Msxml2.XMLHTTP"); 
      }catch(e){
       //IE低版本
        xhr=new ActiveXObject("Microsoft.XMLHTTP"); 
      }
    }
 }
  
  /**
  * 发送请求,用来检查用户名、密码是否正确
  */
  function chkUser(){
    
    //1、创建XMLHttpRequest
    createXMLHttpRequest();
    
    //2、获得用户名、密码
    var username=document.getElementById("username").value;
    var password=document.getElementById("password").value;
    
    //3、与服务器建立连接:open
    var url="login?username="+username+"&password="+password;
    //方式1:get提交
    //xhr.open("GET",url,true);
    
    //方式2:post提交
    var url2="login";
    xhr.open("POST",url2,true);
    
    
    //4、设置回调函数,获得服务器响应的数据
    xhr.onreadystatechange=function(){
      /*
      readyState状态码:
      0:未初始化
      1:正在加载
      2:加载完成
      3:请求进行中
      4:请求完成
      */
      if(xhr.readyState==4){
        //status,200表示响应正常
        if(xhr.status==200){
         //alert("从服务器返回的值为:"+xhr.responseText);
         var res=xhr.responseText;
         if(res=='0'){
           document.getElementById("res").innerHTML="登录成功";
         }else{
           document.getElementById("res").innerHTML="<font color=&#39;red&#39;>登录失败</font>";
         }
         
        }else{
          alert("出现在了异常:"+xhr.response.Text);
        }
        
      }
    }
    //5、发送请求
    //方式1:get方式
    //xhr.send(null);
    
    //方式2:post方式:
    //Post提交需要设置http请求头
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("username="+username+"&password="+password);
    
    
  }
 
</script>
</html>
登录后复制

服务端代码: 

package com.newer.login.web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.newer.login.bean.User;
import com.newer.login.service.UserService;
/**
 * Servlet implementation class LoginServlet
 */
public class LoginServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;
  UserService userService = new UserService();
  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
   *   response)
   */
  protected void doGet(HttpServletRequest request,
      HttpServletResponse response) throws ServletException, IOException {
    doPost(request,response);
  
  }
  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
   *   response)
   */
  protected void doPost(HttpServletRequest request,
      HttpServletResponse response) throws ServletException, IOException {
    // 1、获得页面参数
    String username = request.getParameter("username");
    String password = request.getParameter("password");
    System.out.println("获得请求的参数username:"+username);
    System.out.println("获得请求的参数password:"+password);    
    // 2、封装User对象
    User user = new User();
    user.setUsername(username);
    user.setPassword(password);
    // 3、调用服务类,完成用户名、密码的校验
    User u = userService.login(user);
    /*
     * 传统方式 if(u!=null){ //表示登录成功 request.setAttribute("user", user);
     * //跳转至首页... }else{ //登录失败,跳转登录页面
     * 
     * }
     */
    // ajax响应
    PrintWriter out = response.getWriter();
    if (u != null) {
      //0成功,1失败
      out.print(0);
    }else{
      out.print(1);
    }
    out.close();
  }
}
登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Ajax异步加载的使用详解

使用ajax校验注册的用户名是否存在

以上是新手必看的Ajax技术组成与核心原理分析的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Stable Diffusion 3论文终于发布,架构细节大揭秘,对复现Sora有帮助? Stable Diffusion 3论文终于发布,架构细节大揭秘,对复现Sora有帮助? Mar 06, 2024 pm 05:34 PM

StableDiffusion3的论文终于来了!这个模型于两周前发布,采用了与Sora相同的DiT(DiffusionTransformer)架构,一经发布就引起了不小的轰动。与之前版本相比,StableDiffusion3生成的图质量有了显着提升,现在支持多主题提示,并且文字书写效果也得到了改善,不再出现乱码情况。 StabilityAI指出,StableDiffusion3是一个系列模型,其参数量从800M到8B不等。这一参数范围意味着该模型可以在许多便携设备上直接运行,从而显着降低了使用AI

自动驾驶与轨迹预测看这一篇就够了! 自动驾驶与轨迹预测看这一篇就够了! Feb 28, 2024 pm 07:20 PM

轨迹预测在自动驾驶中承担着重要的角色,自动驾驶轨迹预测是指通过分析车辆行驶过程中的各种数据,预测车辆未来的行驶轨迹。作为自动驾驶的核心模块,轨迹预测的质量对于下游的规划控制至关重要。轨迹预测任务技术栈丰富,需要熟悉自动驾驶动/静态感知、高精地图、车道线、神经网络架构(CNN&GNN&Transformer)技能等,入门难度很大!很多粉丝期望能够尽快上手轨迹预测,少踩坑,今天就为大家盘点下轨迹预测常见的一些问题和入门学习方法!入门相关知识1.预习的论文有没有切入顺序?A:先看survey,p

DualBEV:大幅超越BEVFormer、BEVDet4D,开卷! DualBEV:大幅超越BEVFormer、BEVDet4D,开卷! Mar 21, 2024 pm 05:21 PM

这篇论文探讨了在自动驾驶中,从不同视角(如透视图和鸟瞰图)准确检测物体的问题,特别是如何有效地从透视图(PV)到鸟瞰图(BEV)空间转换特征,这一转换是通过视觉转换(VT)模块实施的。现有的方法大致分为两种策略:2D到3D和3D到2D转换。2D到3D的方法通过预测深度概率来提升密集的2D特征,但深度预测的固有不确定性,尤其是在远处区域,可能会引入不准确性。而3D到2D的方法通常使用3D查询来采样2D特征,并通过Transformer学习3D和2D特征之间对应关系的注意力权重,这增加了计算和部署的

解决jQuery AJAX请求遇到403错误的方法 解决jQuery AJAX请求遇到403错误的方法 Feb 20, 2024 am 10:07 AM

标题:解决jQueryAJAX请求出现403错误的方法及代码示例403错误是指服务器禁止访问资源的请求,通常会导致出现这个错误的原因是请求缺少权限或者被服务器拒绝。在进行jQueryAJAX请求时,有时候会遇到这种情况,本文将介绍如何解决这个问题,并提供代码示例。解决方法:检查权限:首先要确保请求的URL地址是正确的,同时验证是否有足够的权限来访问该资

解决jQuery AJAX请求403错误的方法 解决jQuery AJAX请求403错误的方法 Feb 19, 2024 pm 05:55 PM

jQuery是一个流行的JavaScript库,用于简化客户端端的开发。而AJAX则是在不重新加载整个网页的情况下,通过发送异步请求和与服务器交互的技术。然而在使用jQuery进行AJAX请求时,有时会遇到403错误。403错误通常是服务器禁止访问的错误,可能是由于安全策略或权限问题导致的。在本文中,我们将讨论如何解决jQueryAJAX请求遭遇403错误

PHP 与 Ajax:构建一个自动完成建议引擎 PHP 与 Ajax:构建一个自动完成建议引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax构建自动完成建议引擎:服务器端脚本:处理Ajax请求并返回建议(autocomplete.php)。客户端脚本:发送Ajax请求并显示建议(autocomplete.js)。实战案例:在HTML页面中包含脚本并指定search-input元素标识符。

如何解决jQuery AJAX报错403的问题? 如何解决jQuery AJAX报错403的问题? Feb 23, 2024 pm 04:27 PM

如何解决jQueryAJAX报错403的问题?在开发网页应用程序时,经常会使用jQuery来发送异步请求。然而,有时候在使用jQueryAJAX时可能会遇到错误代码403,表示服务器禁止访问。这种情况通常是由服务器端的安全设置所导致的,但可以通过一些方法来解决这个问题。本文将介绍如何解决jQueryAJAX报错403的问题,并提供具体的代码示例。一、使

综述!深度模型融合(LLM/基础模型/联邦学习/微调等) 综述!深度模型融合(LLM/基础模型/联邦学习/微调等) Apr 18, 2024 pm 09:43 PM

23年9月国防科大、京东和北理工的论文“DeepModelFusion:ASurvey”。深度模型融合/合并是一种新兴技术,它将多个深度学习模型的参数或预测合并为一个模型。它结合了不同模型的能力来弥补单个模型的偏差和错误,以获得更好的性能。而大规模深度学习模型(例如LLM和基础模型)上的深度模型融合面临着一些挑战,包括高计算成本、高维参数空间、不同异构模型之间的干扰等。本文将现有的深度模型融合方法分为四类:(1)“模式连接”,通过一条损失减少的路径将权重空间中的解连接起来,以获得更好的模型融合初

See all articles