ajax

来源：互联网发布：网易数据广州编辑：程序博客网时间：2024/06/05 18:51

ajax

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

AJAX 通过与服务器进行少量数据交换，可以使网页实现异步局部的更新。这意味着可以在不重新加载整个网页的情况下，进行网络通信,并且可以对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

ajax并不是新的技术，他需要以下技术做支撑。

HTML / XHTML

CSS

JavaScript / DOM

ajax的兼容性

ajax核心类：XMLHttpRequest，在js中使用此类XMLHttpRequest 得到了所有绝大部分现代浏览器较好的支持。但是在 IE 5 和 IE 6 中，必须使用特定于 IE 的 ActiveXObject() 构造函数。

ajax核心类：XMLHttpRequestActiveXObject() 

XHR，是javascript中的类，执行在客户端。中文可以解释为可扩展超文本传输请求，此类在js中使用。

XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。

使用步骤：

1XMLHttpRequest 创建

//创建

var xhr = new XMLHttpRequest();

//2解决兼容性问题,如果xhr == null,意味着浏览器不支持此类,

if(xhr == null) {

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

XMLHttpRequest 相关函数和属性

xhr.open("GET","test1.html",true); //打开连接

xhr.send //开始网络请求

xhr.readyState //表示请求的各个阶段或者步骤

responseText // 返回服务器的数据

2XMLHttpRequest 请求

3XMLHttpRequest 响应

同步和异步

同步:同时只做一个事情,执行顺序按照步骤,即使前面一个步骤耗时,后面的也需要等待

异步:同时做多种事情,多个事情同时执行,互相不干扰.

ajax中的同步和异步,ajax通过XMLHttpRequest实现一个网络请求.网络请求耗时,在这个请求的过程中如果你需要浏览器或者你的代码继续执行其他操作,这个时候我们就要一个异步的ajax.

做一个简单的同步ajax

服务器端:

创建一个Servlet等待被访问,servlet可以通过浏览器直接被访问到,也可以通过ajax请求访问到

在Servlet中通过response.getWriter().print("")向响应中添加内容

客户端:

再点击事件中创建类,解决兼容问题,准备工作,开始请求,获取请求得到的响应.

代码示例:

function fun() {

// alert(1);

//1创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

//2解决兼容性问题,如果xhr == null,意味着浏览器不支持此类,

if(xhr == null) {

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

//3设置请求方式,请求路径,是否异步

xhr.open("GET","index",false);

//4开始请求 请求耗时,false表示同步,true表示异步

//请求耗时,一直到达服务器,请求才会执行完毕

xhr.send();

var yest = xhr.responseText;

alert(yest);

}

如果是异步的ajax请求,既send需要很长时间才能到达服务器,send函数后面的代码并不会等待它执行

完毕,而是直接执行.

实例:

jsp页面代码:

<script>

function selectchange() {

console.log(11);

var index = document.getElementById("one").selectedIndex;

var n = new XMLHttpRequest();

if(n == null){

n = ActiveXObject("Microsoft.XMLHTTP");

}

var url = "index1?cid="+index;

n.open("get", url, true);

n.send();

console.log(22);

n.onreadystatechange = function(){

if(n.readyState == 4){

if(n.status == 200){

document.getElementById("two").innerHTML = n.responseText;

}

}

}

}

</script>

</head>

<body>

<select id="one" onchange = "selectchange()">

<option >北京</option>

<option >上海</option>

<option >河南</option>

</select>

<select id="two">

<!-- <option>朝阳区</option> -->

</select>

Servlet界面:

protected voiddoGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String id = request.getParameter("cid");

response.setContentType("text/html; charset = utf-8" );

String str = "";

switch (id) {

case "0":

str = "<option>东城</option><option>西城</option><option>朝阳</option>";

System.out.println(1);

break;

case "1":

str = "<option>浦东</option><option>浦西</option><option>崇明区</option>";

System.out.println(1);

break;

case "2":

str = "<option>郑州</option><option>洛阳</option><option>巩义</option>";

System.out.println(1);

break;

}

response.getWriter().print(str);

}

XMLHttpRequest响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText： 获得字符串形式的响应数据。

responseXML： 获得 XML 形式的响应数据。

一般情况下获取到服务器响应之后我们会做以下操作：document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

在ajax的响应中做页面跳转

不推荐，错误写法

1 在servlet中

response.sendRedirect("http:www.baidu.com");

2 在jsp文件中

<%response.sendRedirect("http:www.baidu.com");%>

正确写法：应该使用js的跳转方法（有多种方式）

js中

window.location.href="http://www.baidu.com";

java ，jsp ，js代码执行顺序

java是在服务器端运行的代码，jsp在服务器的servlet里运行，而JavaScript和html都是在浏览器端运行的代码。

所以服务器端先执行，执行后将信息传给客户端。

因此加载jsp页面的执行顺序是java -> jsp ->js。

使用ajax的弊端

1 对搜索引擎的支持不好

2 编写复杂、容易出错

3 冗余代码更多了

4 破坏了Web的原有标准,不在使用<a>

5 没有back和history的浏览器

6 ajax使用时候一般数据的传输尽量单一和简陋，不要传输大量的数据。

如果数据较大使用异步,这样不会阻塞代码向下执行.

如果通过ajax获取到的服务器的值是作为向下的代码中条件或者数值使用,使用同步

代码在业务逻辑有前后顺序之分必须之分必须使用同步

Java中的多线程

单线程

多线程

线程锁

同步

1创建对象

var a = new XMLHttpRequest();

2.解决兼容性

if (a == null){

}

3设置参数

a.open("get", url, false);

4.发送请求

a.send();

5.获取服务器的响应

a.responseText();

异步;

1创建对象

var a = new XMLHttpRequest();

2.解决兼容性

if (a == null){

}

3设置参数

a.open("get", url, false);

4.发送请求

a.send();

5.获取数据

a.onreadyStateChange() = function(){

if(a.readyState == 4){

if(a.status == 200){

a.responseText;

}

}

}

function fun() {

//1创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

//2解决兼容性问题,如果xhr == null,意味着浏览器不支持此类,

if(xhr == null) {

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

//3设置请求方式,请求路径,是否异步

xhr.open("GET","index",true);

//4开始请求 请求耗时,false表示同步,true表示异步

//请求耗时,一直到达服务器,请求才会执行完毕

xhr.send();

//当readystate值发生改变的时候的回调方法.

/*0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪*/

//每次readystate发生变化,意味着请求的步骤发生了变化,

//都会触发此方法,我们在这里判断如果readystate值为4,克制当前请求

//打到最后一步,就可以通过xhr.reasponseText获取到服务器的返回值

xhr.onreadystatechange = function(){

alert(xhr.readyState);

if(xhr.readyState == 4){

//执行到这里只是证明到达服务器,办事并不能保证请求正常

//通过对服务器响应码进行判断,

if(xhr.status ==200 ){

//这里只是保证请求正确,不保证业务逻辑正确

var yest = xhr.responseText;

document.getElementById("d2").innerHTML = yest;

console.log(111);

}

}

}

//var yest = xhr.responseText;

//向浏览器控制台输出,可以辅助查看代码执行到那些逻辑判断中

console.log(222);

}

阅读全文

0 0