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. HDU 5695 Gym Class

    拓扑排序. #include<cstdio> #include <iostream> #include<cstring> #include<cmath> ...

  2. c:forEach varStatus 属性

    c:forEach varStatus 属性 current: 当前这次迭代的(集合中的)项 index: 当前这次迭代从 0 开始的迭代索引 count: 当前这次迭代从 1 开始的迭代计数 fir ...

  3. Exception: Could not bind to 0.0.0.0:8080 after trying for 30 seconds

    swift@vincent-virtual-machine /etc/swift $ sudo swift-init main restart Signal proxy-server pid: sig ...

  4. 【深度探索c++对象模型】Function语义学之成员函数调用方式

    非静态成员函数 c++的设计准则之一就是:非静态成员函数至少和一般的非成员函数有相同的效率.编译器内部已将member函数实体转换为对等的nonmember函数实体. 转化步骤: 1.改写函数原型以安 ...

  5. SQL 撤销索引、撤销表以及撤销数据库

    SQL 撤销索引.撤销表以及撤销数据库 通过使用 DROP 语句,可以轻松地删除索引.表和数据库. DROP INDEX 语句 DROP INDEX 语句用于删除表中的索引. 用于 MS Access ...

  6. Android 使用 DownloadManager 管理系统下载任务的方法

    在红黑联盟上看到的.这几天一直考虑做一个Notification 的带下载功能的自己定义通知.但没搞出来.无意中在论坛看到这个.先Mark,明天试试. 从Android 2.3(API level 9 ...

  7. hdoj-2090-算菜价(水题)

    算菜价 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  8. oracle sql 超长报ORA-01460错误

    程序查找数据的时候报错了: ORA-01460: 转换请求无法实施或不合理 这是什么鬼?不合理你就提嘛,报错干什么. 程序原本好好的,现在突然报错了.数据库并没有什么更改. 后来猜测是因为执行的SQL ...

  9. flask的路由配置,特殊装饰器

    1,flask中的路由 endpoint-url_for反向地址 endpoint默认是视图函数名endpoint="雪雪" methods 指定视图函数的请求方式,默认GET d ...

  10. CRM2011部署问题小结

    1 CRM2011部署当插件太多,并且文件太多的时候选择硬盘部署 2 在生产环境这样复杂的CRM2011部署环境的时候弄清楚每台CRM服务器的结构是很重要的弟一步 3 一定要注意DMZ区和内网隔离的, ...