关于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>
<div id="res"></div>
</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='red'>登录失败</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(); } }
关于Ajax的技术组成与核心原理的更多相关文章
- 《大型网站技术架构：核心原理与案例分析》【PDF】下载
<大型网站技术架构:核心原理与案例分析>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062557 内容简介 本书通过梳理大型网站 ...
- 阅读《大型网站技术架构：核心原理与案例分析》第五、六、七章，结合《XXX重大技术需求征集系统》，列举实例分析采用的可用性和可修改性战术，将上述内容撰写成一篇1500字左右的博客阐述你的观点。
这三章主要讲述的是网站的可用性.伸缩性和可扩展性. 首先,网站的可用性描述网站可有效访问的特性,相比于网站的其他非功能特性,网站的可用性更容易引起人们的注意,尤其是大型网站的可用性,如果大公司的网站出 ...
- web技术发展历程--读《大型网站技术架构_核心原理与案例分析》
1 早期的web服务 2 CGI程序的出现.发展.凋零到MVC的兴起 CGI:通用网关接口技术. 随着CGI技术的出现,web服务端可以通过不同的用户请求产生动态页面内容. web服务器将请求数据交给 ...
- 【转】分布式环境下5种session处理策略（大型网站技术架构：核心原理与案例分析 里面的方案）
前言 在搭建完集群环境后,不得不考虑的一个问题就是用户访问产生的session如何处理.如果不做任何处理的话,用户将出现频繁登录的现象,比如集群中存在A.B两台服务器,用户在第一次访问网站时,Ngin ...
- Docker容器技术的核心原理
目录 1 前言 2 docker容器技术 2.1 隔离:Namespace 2.2 限制:Cgroup 2.3 rootfs 2.4 镜像分层 3 docker容器与虚拟机的对比 1 前言 上图是百度 ...
- atitit.ajax上传文件的实现原理 与设计
atitit.ajax上传文件的实现原理 与设计 1. 上传文件的三大难题 1 1.1. 本地预览 1 1.2. 无刷新 1 1.3. 进度显示 1 2. 传统的html4 + ajax 是无法直 ...
- SPA 路由三部曲之核心原理
为了配合单页面 Web 应用快速发展的节奏,近几年,各类前端组件化技术栈层出不穷.通过不断的版本迭代 React.Vue 脱颖而出,成为当下最受欢迎的两大技术栈. 仅 7 个月的时间,两个技术栈的下载 ...
- 【算法】(查找你附近的人) GeoHash核心原理解析及代码实现
本文地址 原文地址 分享提纲: 0. 引子 1. 感性认识GeoHash 2. GeoHash算法的步骤 3. GeoHash Base32编码长度与精度 4. GeoHash算法 5. 使用注意点( ...
- 高性能消息队列 CKafka 核心原理介绍（上）
欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:闫燕飞 1.背景 Ckafka是基础架构部开发的高性能.高可用消息中间件,其主要用于消息传输.网站活动追踪.运营监控.日志聚合.流式 ...
随机推荐
- QT小插件类之QRoundProgressBar
QRoundProgressBar类 1. 详细描述 QRoundProgressBar类能够实现一个圆形的进度图表,并且有和QProgressBar类似的API接口 1.1 继承关系 #includ ...
- MFC 点击改变文本 加法计时器 伸缩窗体
1.添加所需控件,设置ID:labNum1,txtNum1.txtNum2.txtNum3.btnAdd,并将labNum1的属性Notify->true(控件在被单击或双击时可以发送消息) 2 ...
- 三级联动数据表db_nove.sql
-- phpMyAdmin SQL Dump -- version 2.11.2 -- http://www.phpmyadmin.net -- -- 主机: localhost -- 生成日期: 2 ...
- Webpack: 为Web开发而生的模块管理器[转]
Webpack: 为Web开发而生的模块管理器 原文地址:http://hanjianwei.com/2014/09/10/webpack-package-manager-for-web/ 10 Se ...
- PHP 函数dirname()使用实例
通常在配置文件路径的时候用dirname(__FILE__)是非常有效的方法,但是因为__FILE__的路径是当前代码所在文件(而不是url所在文件)完整路径,所以定义配置文件通常要放在根目录下定义网 ...
- matlab图像处理
matlab图像处理 转自:http://www.cnblogs.com/lovebay/p/5094146.html 1. 图像和图像数据 缺省情况下,MATLAB将图像中的数据存储为双精度类型(d ...
- Visual Studio中的lib的链接顺序
描述:如果有一个exe工程,它依赖于A.lib,B.lib,A.lib和B.DLL我同样有他们的源码工程.依赖顺序是这样的exe->A.lib->B.DLL.那么如果我改动了B的源码,编译 ...
- list append 总是复制前面的参数，而不复制最后一个参数
append 总是复制前面的参数,而不复制最后一个参数 (define a1 '(1 2 3)) (define a2 '(a b c)) (define x (append a1 a2)) x ; ...
- jar包版本冲突，并且要保留两个版本都能使用
问题:在做项目时,遇到jar版本冲突的问题,并且老代码依赖不能用新jar包代替,要保证功能不变须要保证两个jar都能使用 思路:使用runtime 的exec 方式另启线程运行,然后返回结果 解决: ...
- EucOne调试
~/.ssh/id_rsa权限问题,造成ssh无法登陆问题解决;