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学习之- 生成器/迭代器

    列表生成式写法: [ i*2 for i in range(10) ]也可以带函数 [ fun(i) for i in range(10) ] 生成器:一边循环一边计算的机制称为生成器.在常用函数中, ...

  2. CodeForces 593A 2Char

    暴力. #include<cstdio> #include<cstring> #include<cmath> #include<algorithm> u ...

  3. Dividing--hdu1059(动态规划)

    Problem Description Marsha and Bill own a collection of marbles. They want to split the collection a ...

  4. [Bzoj2039]小Z的袜子 (莫队算法模板题)

    2038: [2009国家集训队]小Z的袜子(hose) Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 11866  Solved: 5318[Sub ...

  5. java基础语法1

    一:基础语法之--标识符,修饰符,关键字 1.标识符: 定义:类名.变量名以及方法名都被称为标识符.自定义的名字. 注意: ·所有的标识符都应该以字母(A-Z或者a-z),美元符($).或者下划线(_ ...

  6. java去空格

    1.trim()是去掉首尾空格    2.str.replace(" ", ""); 去掉所有空格,包括首尾.中间    3.或者replaceAll(&quo ...

  7. 扫描控件Web在线Applet

    基于JAVAEE的B/S架构由于java语言的跨平台性 所以操控Window客户端资源能力有限, 目前比较流行是用其他语言如Delphi,VB,C++开发客户端控件 然后再html中用js调用.    ...

  8. 为RAC私有网络配置网卡Bonding

    在RAC的安装部署过程中.并不不过简单的安装完毕了事.整个安装过程要考虑可能出现的单点问题,当中比較重要的是私有网络. 私有网络是RAC节点间通信的通道.包含节点间的网络心跳信息.Cache fusi ...

  9. vue 定义全局函数

    方法一:main.js 注入 (1)在main.js中写入函数 Vue.prototype.changeData = function (){ alert('执行成功'); } (2)在所有组件里可调 ...

  10. Oracle APEX 4.2安装和配置

    A standard Oracle 11.2.0.3 database installation comes bundled with Application Express (APEX) 3.2.1 ...