引言:

非TGB的。直接跳过吧……

从开学结束JQuery之后,计算机的进度停了一段时间。某天无聊的时候,又又一次把BS的东西拿过来看了看。

发现里面有非常多既熟悉又陌生的东西。

在学习王兴魁老师的Ajax的时候,里面的东西,大多都是之前学过的。在学习JS的时候。有非常多js资料。

非常多人看的都是牛腩js和姜浩的js。可是我师父让我看李炎恢的js。

刚開始的时候感觉挺怪的。牛腩的js一周,姜浩的js
一周。李炎恢的js 150集据说至少看三个星期。

尽管感觉压力大了点。

可是等真正看的时候。才发现这150集的内容挺实用的。前面解说的很基础。后面通过一个项目,解说了JQuery是怎样从js封装过来的。以及Ajax的入门技术。

在看Ajax的时候,发现基本里面全是学过的东西。如今来学习一下Ajax的基础。并看一个实例。

Ajax基础:

上面啰嗦了半天,如今进入正题。

什么是Ajax?

Ajax缩写:AsynchronousJavaScript
and XML 也就是 异步的 js和xml。

利用Ajax能够在向server请求数据的时候。client不进行刷新。

就是client与server的交互,能够不间断的进行。

即:client发送的请求。不影响client的使用。

同步与异步的差别?

同步:

client向server请求一个数据,页面又一次载入(刷新)。

异步:

client请求数据。

页面上直接得到而不须要刷新。

Ajax技术。能够使得web页面更加友好。不会由于操作一小块的内容,使得整个页面进行刷新。

Ajax的核心技术,就是XmlHttpRequest对象(简称XHR)。这个对象的作用。就相当于。client的秘书。

传统的页面设计:

当请求数据的时候,须要等待server传回数据之后才干进行下一步操作。(可能造成无响应的状态)

Ajax方式的页面:

client发送请求数据的操作之后,仍然能够继续使用。(不会刷新页面)比方,百度的搜索框。不会由于你填写了内容
而停止响应。

XmlHttpRequest对象,作为client的“秘书”与server进行交互。

传统Web页面与Ajax方式Web页面的对照

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemM0NzQyMzU5MTg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast">

Ajax入门:五步学会XmlHttpRequest

html页面:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript"> 
var xmlhttp;
function submit() {
//此处省略1-4步骤
}
function callback() {
//此处省略5步骤
}
</script>
</head>
<body>
<div>username:</div>
<input type="text" id="userName"/>
<input type="button" onclick="submit()" value="校验" />
<br />
<div id="message"></div>
</body>
</html>

以下是五步流程:

1、创建XmlHttpRequest对象

 //1.创建xmlHttpRequest对象
if (window.XMLHttpRequest) {
//IE7,IE8,FireFox,Mozillar,Safari,Opera
//alert("IE7,IE8,FireFox,Mozillar,Safari,Opera");
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//IE6,IE5.5,IE5
var activeName = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Miscrosoft.XMLHTTP"];
for (var i = 0; i < activeName.length; i++) {
try {
xmlhttp = new ActiveXObject(activeName[i]);
break;
} catch (e) { } }
}
if (xmlhttp === undefined || xmlhttp === null) {
alert("当前浏览器不支持创建xmlhttprequest对象,请更换浏览器");
return;
}

2、注冊回调函数

                    //2.注冊回调方法
xmlhttp.onreadystatechange = callback;

注:在注冊回调函数的时候,仅仅须要把函数名赋值就可以。假设 赋值callback().则赋值为 函数运行的结果值。

3、设置与server交互的參数

                    //3.设置和server交互的对应參数(Get)
var userName=document.getElementById("userName").value;
xmlhttp.open("GET", "Ajax?name=" + userName, true); //true 表示异步的方式
//3.设置和server交互的对应參数(Post)
//xmlhttp.open("POST","AJAX",true);
//xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

4、向server发送数据

                    //4.设置向server发送的数据。启动和server端的交互
xmlhttp.send(null);

5、推断与server交互是否完毕,并推断是否有返回数据

                        //5.推断server端的交互是否完毕,还要推断server端是否返回了数据
if (xmlhttp.readyState === 4) {
//表示和server端的交互已经完毕
if (xmlhttp.status === 200) {
//表示server的响应代码是200,正确的返回了数据
//纯文本接受数据方式
var message = xmlhttp.responseText;
//xml数据相应的dom对象的接受方法
//使用的前提是。server端须要设置content-type为text/xml
//var domXml=xmlhttp.responseXML var messageNode = document.getElementById("message");
messageNode.innerHTML = message; }
}

注:理解困难的。能够去研究一下xmlhttprequest对象的属性及事件。

唯独以上的html。执行结果肯定有问题…… 执行都没有Webserver。

单纯html客户跟谁交互?

此时,应该创建Webserver。使用tomcatserver创建servlet

/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
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; /**
*
* @author 赵崇
*/
public class Ajax extends HttpServlet { /**
* Processes requests for both HTTP <code>GET</code> and <code>POST</code>
* methods.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
try (PrintWriter out = response.getWriter()) {
/* TODO output your page here. You may use following sample code. */
String old=request.getParameter("name");
if(old==null){
out.println("username不能为空");
}else{
String name=new String(old.getBytes("ISO8859-1"),"gb2312");
System.out.println(name);
if(name.equals("zhaochong")){
out.println("username["+ name+"]已经存在。请使用其它username");
}else{
out.println("username["+ name+"]尚未存在,请使用其它username");
}
}
}
}

在创建servlet的时候,仅仅须要改动processRequest函数中的内容。创建servlet的时候,请自己主动生成xml

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemM0NzQyMzU5MTg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast">

以上Demo是在NetBean IDE上进行的。尽管这么一个小样例。发现里面有好多都不懂……比方tomcat与glashfish的差别 以及xml文件里内容的含义等等。

看视频的时候,眼看偏了,忽略了 开发环境的配置。

总结

通过以上一个小样例,能够初步了解一下Ajax与传统页面的差别。更加深入的理解,须要在多次反复,在项目中应用,才干熟练掌握。

Ajax核心对象——高速上手XmlHttpRequest的更多相关文章

  1. ASP.NET Ajax核心对象

    本章学习目标 主要掌握AJAX的基本概念和实现机制,学习并创建XMLHttpRequest对象,使用XMLHttpRequestObject对象获取服务器端的数据 主要内容如下,请点击ASP.NET ...

  2. AJAX异步对象,即XMLHttpRequest

    //创建AJAX异步对象,即XMLHttpRequest function createAJAX(){ var ajax = null; try{ ajax = new ActiveXObject(& ...

  3. 学习笔记 之--AJAX核心对象 XMLHttpRequest

    实现AJAX功能,核心就是XMLHttpRequest,而且现在大多数浏览器都支持这个核心组件对象. 实例:实现无刷新登陆验证 1.前台代码 <html xmlns="http://w ...

  4. AJAX 核心 —— XMLHTTPRequest 对象回顾

    一.AJAX概述 不使用 AJAX 的网页,如果要更新内容,需要重载整个页面. AJAX ( Asynchronous Javascript And XML ,异步 Javascript 和 XML) ...

  5. 详解AJAX核心 —— XMLHttpRequest 对象 (上)

    我要说的内容都是非常基础的内容,高手就免看了,如果看了欢迎给点意见啊.新手或者对低层还不是很了解的人可以看看,帮助理解与记忆. XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程 ...

  6. XmlHttpRequest对象 ajax核心之一

    XMLHttpRequest 对象 XML XSLT XML 解析器 XMLHttpRequest 对象用于在后台与服务器交换数据. 什么是 XMLHttpRequest 对象? XMLHttpReq ...

  7. Ajax的核心对象创建步骤

    * Ajax具有核心对象 * XMLHttpRequest对象 * 如何创建XMLHttpRequest对象 function getXhr(){ // 声明XMLHttpRequest对象 var ...

  8. Ajax核心——XMLHttpRequest基础

    XMLHttpRequest对象负责将用户信息以异步方式发送到服务器,并接受服务器返回的相应信息和数据.也就是可以在页面已经加载后从后从服务器请求.接收数据,这样使得用户的体验度更好,而同时提升了客户 ...

  9. Ajax核心知识(2)

    对于Ajax核心的东西需要在进行总结提炼一下: xmlHttp对象. 方法:xml.responseText获取后台传递到前台的数据,经常性的使用var object=xml.responseText ...

随机推荐

  1. 基于深度学习的病毒检测技术无需沙箱环境,直接将样本文件转换为二维图片,进而应用改造后的卷积神经网络 Inception V4 进行训练和检测

    话题 3: 基于深度学习的二进制恶意样本检测 分享主题:全球正在经历一场由科技驱动的数字化转型,传统技术已经不能适应病毒数量飞速增长的发展态势.而基于沙箱的检测方案无法满足 APT 攻击的检测需求,也 ...

  2. poj--2385--Apple Catching(状态dp)

    Apple Catching Time Limit: 1000MS   Memory Limit: 65536KB   64bit IO Format: %I64d & %I64u Submi ...

  3. Hints

    If you played with the Fibonacci function, you might have noticed that the bigger the argument you p ...

  4. Magento-设置产品显示的条数和默认条数

    在Block/Product/List/Toolbar.php里面,控制每页显示条数和默认条数的方法如下: 1.每页显示条数: protected function _getAvailableLimi ...

  5. java根据模板导出PDF(利用itext)

    一.制作模板     1.下载Adobe Acrobat 9 Pro软件(pdf编辑器),制作模板必须使用该工具. 2.下载itextpdf-5.5.5.jar.itext-asian-5.2.0.j ...

  6. 《剑指offer》矩形覆盖

    一.题目描述 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 二.输入描述 输入n 三.输出描述 输出有多少种不同的覆 ...

  7. Futures and promises

    In computer science, future, promise, delay, and deferred refer to constructs used for synchronizing ...

  8. vue-router路由配置

    转自http://www.cnblogs.com/padding1015/ 两种配置方法:在main.js中 || 在src/router文件夹下的index.js中 src/router/index ...

  9. BZOJ 2724 [Violet 6]蒲公英(分块)

    题意 在线区间众数 思路 预处理出 f[i][j] 即从第 i 块到第 j 块的答案.对于每个询问,中间的整块直接用预处理出的,两端的 sqrtn 级别的数暴力做,用二分查找它们出现的次数.每次询问的 ...

  10. Java基础学习总结(12)——一哈希编码HashCode

    一.哈希编码 现在是站在JAVA虚拟机的角度来看内存里面的布局,站在JAVA虚拟机的角度,在内存里面有好多好多个对象,这里用椭圆来代表一个个对象.一个程序运行起来的时候,可能会有很多个对象在内存里面分 ...