1.什么是Ajax?

  AJAX的全称是Asynchronous Javascript And XML (异步的JavaScript和XML)。是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
  ajax是以下几种技术的组合应用:
    – 基于web标准(standards-based presentation)XHTML+CSS的表示;
    – 使用 DOM(Document Object Model)进行动态显示及交互;
    – 使用 XML 和 XSLT 进行数据交换及相关操作;(现在更多的是使用JOSN)
    – 使用 XMLHttpRequest 进行异步数据查询、检索;
    – 使用 JavaScript 将所有的东西绑定在一起。

2.Ajax工作原理

  Ajax的工作原理相当于在用户和服务器之间加了一个中间层(ajax引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证(比如判断用户是否输入了数据)和数据处理(比如判断用户输入数据是否是数字)等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

   

3.创建Ajax的步骤

  1.创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

   XMLHttpRequest对象是Ajax的核心,它是Ajax实现的关键,发送异步请求、接受响应以及执行回调都是通过它来完成。

  2.使用XMLHttpRequest对象创建请求

  

   同步模式:发出的请求会暂停所有javascript代码的执行,知道服务器获得响应为止,如果浏览器在连接网络时或者在下载文件时出了故障,页面就会一直挂起。
   异步模式:发出的请求,请求对象收发数据的同时,浏览器可以继续加载页面,执行其他javascript代码

  3.处理响应:监听readyStates属性值的变化,写回调函数处理服务器返回的数据

xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}

  readyState :ajax的状态
    0:请求未初始化(还没有调用 open())。
    1:建立请求:但是还没有发送(还没有调用 send())。
    2:发送请求:正在处理中(通常现在可以从响应中获取内容头)。
    3:请求处理中:已有部分数据可用了,但是这时获取部分数据会出现错误。
    4:响应已完成:此时可以通过通过responseBody和responseText获取完整的回应数据。

  status属性:
    200:"OK"
    404: 未找到页面
    500:服务器内部错误”

  4.使用XMLHttpRequest对象发送请求

xhr.send();

  发送请求方式:
    get:使用get方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null或为空。

xhr.open("GET",url?name="张三"&age=18,true);
xhr.send(null);

    post:需要先使用 setRequestHeader()来添加请求头设置post编码方式:。然后在send()方法中发送的数据:

xhr.open("post", url, true);
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send("name=张三&age=18");

4.XMLHttpRequest对象的属性和方法

  

  

5.Servlet响应请求

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//最好把请求和响应的编码设置成utf-8
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8"); PrintWriter out = response.getWriter();
out.write(数据);
}

  数据最好以json的方式发给页面,然后利用eval函数将返回的文本转化成js对象

深入学习Ajax的更多相关文章

  1. 学无止境,学习AJAX,跨域(三)

    学习AJAX其实有个很重要的应用,就是为了执行另外几个站点的ASP,返回结果. 真正用起来,发现2个问题,>_> 不许笑,一向做DELPHI,接触ASP不多的我,的确问题大堆. 第一个问题 ...

  2. 由浅入深学习ajax跨域(JSONP)问题

    什么是跨域?说直白点就是获取别人网站上的内容.但这么说貌似又有点混淆,因为通常我们用ajax+php就可以获取别人网站的内容,来看下面这个例子. 来看看跨域的例子,jquery+ajax是不能跨域请求 ...

  3. 学无止境,学习AJAX(一)

    什么是AJAX?异步JavaScript和XML. AJAX是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的 ...

  4. 学习ajax总结

    之前公司的ajax学习分享,做一点总结,加深记忆 什么是ajax? 异步的的js和xml,用js异步形式操作xml,工作主要是数据交互 借阅用户操作时间,减少数据请求,可以无刷新请求数据 创建一个对象 ...

  5. 学习Ajax小结

    Ajax 学习         1.ajax的概念              局部刷新技术,不是一门新技术,是多种技术的组合,是浏览器端技术         2.作用             可以实现 ...

  6. 学习ajax 总结

    一.服务器客户端基础知识 通信是指不同计算机程序的通信,单单通过ip地址就能知道你找的是哪一台计算机,但是不知道是计算机上的哪个应用程序,要想知道是哪个程序就必须通过端口.这时候就可以问端口到底是什么 ...

  7. 学无止境,学习AJAX(二)

    POST 请求 一个简单 POST 请求: xmlhttp.open("POST","demo_post.asp",true); xmlhttp.send(); ...

  8. 学习Ajax

    1.XHR对象 IE7+.Firefox.Opera.Chrome和Safari都支持原生XMLHttpRequest对象,IE6不支持,只支持ActiveXObject对象,该对象在IE11中已经不 ...

  9. 对学习Ajax的知识总结

    1.对Ajax的初步认识 1.1. Ajax 是一种网页开发技术,(Asynchronous Javascript + XML)异步 JavaScript 和 XML: 1.2.Ajax 是异步交互, ...

  10. [Django学习]Ajax访问静态页面

    Web开发中常用的一种开发方式是:通过Ajax进行系统的交互,采用Ajax进行交互的时候,更多的时候传输的是JSON格式的数据. 所以开发中我们需要将数据格式转化成JSON,请参见:https://w ...

随机推荐

  1. python之-- socket 基础篇

    socket 网络模块 注意事项:在python3中,所有数据的传输必须用bytes类型(bytes只支持ascii码)所以在发送数据的时候要么在发送的字符串前面加 'b',要么使用encode('u ...

  2. zoj4028 LIS

    差分约束瞎搞一下,话说这个数据不知道怎么回事,我的图按道理而言最多只有4n条边,开5n还不够??必须6n?? 约束条件首先根据f函数可建立两点之间的约束,不妨设d[i]为i到0的距离,则对于f[i] ...

  3. POJ 3159 【朴素的差分约束】

    好吧终于知道什么是“高大上”的差分约束了.嗷嗷 题意: 小朋友们分糖果,某个小朋友不想另外一个小朋友分到的糖果数比自己多N块以上. 求编号为N的小朋友最多比编号为1的小朋友多分多少块糖果. 思路: 差 ...

  4. 2017多校Round2(hdu6045~hdu6055)

    补题进度:10/11 1001(不等式) 根据题意列不等式,解一解就行了 1002(套路) 题意: 给定一个随机产生的1e6*1e6的矩阵和一个1e3*1e3的矩阵,你要回答这个1e3*1e3的小矩阵 ...

  5. rror Code: 1175. You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column To disable safe mode, toggle the option in Preferences -> SQL Editor and reconnec

    在mysql5中,可以设置safe mode,比如在一个更新语句中 UPDATE table_name SET bDeleted=0; 执行时会错误,报: You are using safe upd ...

  6. Linux 的 Socket IO 模型

    前言 之前有看到用很幽默的方式讲解Windows的socket IO模型,借用这个故事,讲解下linux的socket IO模型: 老陈有一个在外地工作的女儿,不能经常回来,老陈和她通过信件联系. 他 ...

  7. webpack-Targets(构建目标)

    构建目标(Targets) 因为服务器和浏览器代码都可以用 JavaScript 编写,所以 webpack 提供了多种构建目标(target),你可以在你的 webpack 配置中设置. webpa ...

  8. 同步定制 Unity团队 程序的C#文件模板

    孙广东   2015.7.30 就是把程序制定好的模板(不论什么人能够更改并同步git)放到,unity项目的Editor 目录下, 当程序新建一个C#脚本后就是这个模板了. "81-C# ...

  9. Please enter a commit message to explain why this merge is necessary.

    Please enter a commit message to explain why this merge is necessary. 请输入提交消息来解释为什么这种合并是必要的 git 在pul ...

  10. Hibernate 之 HQL

    通过对Hibernate框架的学习,已经慢慢的对Hibernate有了进一步的了解,接下来我们要说的是HibernateQusery Language(HQL),如果你正在学习SSH框架,那SQL对你 ...