首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

java:1分钟学会AJAX异步请求,远离bug不再有

关注本文评论区提供java学习地

1.ajax技术

1.1.什么是ajax

Ajax技术:

主要是把html、css、js、dom 技术结合在一起使用。

在页面不刷新的情况下,和后台的服务器,以及程序进行数据的传输。

页面不刷新:用户在操作页面的时候,当某个操作结束之后,使用AJAX技术和服务器进行交互,但是用户还可以继续再页面上进行其他的操作。用户并不会感觉到页面在和后台交互。

ajax常见应用:

地图、注册页面光标离焦之后验证某些数据是否可用等(用户可用,用户存在,都是到后台进行交互)。

1.2.ajax的作用

ajax:在页面不刷新的情况下和服务器进行交互。获取服务器中的任何数据。

1.3.ajax快速入门案例

1.3.1.ajax和服务器交互的本质

1.3.2.获取XMLHttpRequest对象

XMLHttprequest对象是所有浏览器内置的对象。这个对象负责和服务器之间进行数据的交互。我们在JS代码中,先得到XMLhttprequest对象,然后通过这个对象的向服务器发送数据,同时还要使用这个对象接收服务器的响应数据,在获取到响应数据之后,使用JS和dom技术,把数据添加到当前的页面上。

function createXMLHttp(){

var xmlhttp;

/*

在JS中所有的 非 零、 非null 、 非undefined 都可以任务是 true

如果当前window对象有XMLHttpRequest,这时就会得到XMLHttpRequest,

如果当前的window对象没有XMLHttpRequest,这时会得到undefined

*/

// code for IE7+, Firefox, Chrome, Opera, Safari

}

else{

// code for IE6, IE5

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

}

return xmlhttp;

}

1.4.XMLHttpRequest API 详解

1.4.1.onreadystatechange属性

在xmlhttprequest对象中,提供onreadystatechange属性。这个属性会随着客户端和服务器之间的交互变化提供不同的内容。

onreadystatechange 它需要和一个函数进行绑定,在客户端和服务器之间的状态在改变的时候,都会导致onreadystatechange绑定的函数运行。

1.4.2.open方法

在获取到xmlhttprequest对象之后,我们可以使用这个对象和服务器进行交互,页面不刷新。

获取到xmlhttprequest对象之后,需要和服务器建立连接通道。在xmlhttprequest对象中提供的open方法

open方法中的第一个参数:

设置向服务器发送请求时提交数据的方式:get和post

open方法中的第二个参数:

本次请求的服务器的资源路径。

open方法的第三个参数:

true:表示页面的处理和后台发送请求是异步进行。一般都设置true。

false:页面的处理和后台是同步。

1.4.3.Send()方法

send是将请求的数据发送给服务器。send方法中的参数,只有在post请求时才能书写。

如果get方式,直接书写send,括号中不要书写任何内容。

1.4.4.setRequestHeader方法

如果使用post方式和服务器交互,并且在send中携带参数,需要通过xmlhttprequest中的setRequestHeader设置请求头信息。

1.4.5.readyState属性

onreadystatechange 事件是针对xmlhttprequest对象和服务器之间交互的

每个状态改变的时候,都会导致onreadystatechange执行。

测试 它xmlhttprequest和服务器之间的状态改变:

xmlhttprequest中提供另外的两个属性:

readyState:记录客户端和服务器之间每步状态变化

status:记录服务器和客户端之间响应的信息变化

1.4.6.status属性

1.4.7.responseText属性

xmlhttprequest对象中提供的2个属性来获取服务器响应的数据:

responseText:它接收服务器响应的所有文本数据。

responseXML:它接收服务器响应的xml格式的数据。

后台响应数据的时候,设置如下:

ajax中使用responseText接收响应的数据。

1.4.8.responseXML属性-了解

ajax中使用responseXML接收数据。

这时接收到的数据之后,需要使用JS和xml DOM技术解析响应的xml文档数据。

1.5.ajax技术和服务器交互模版代码:

【XMLHttpRequest】:

Ø属性:

* readyState :XMLHttpRequest的状态

* onreadystatechange :当XMLHttpRequest状态改变的时候触发一个函数.

* status :获得响应的状态码. 200 , 404 ...

* responseText :获得响应的文本数据.

* responseXML :获得响应的XML的数据.

Ø方法:

* open(请求方式,请求路径,是否异步) :异步去向服务器发送请求.

* send(请求参数) :发送请求.

* setRequestHeader(头信息,头的值) :处理POST请求方式的中文问题.

Ø创建XMLHttpRequest对象:

* IE :将XMLHttpRequest对象封装在一个ActiveXObject组件.

* Firefox :直接就可以创建XMLHttpRequest对象.

function createXMLHttp(){

var xmlhttp;

// code for IE7+, Firefox, Chrome, Opera, Safari

}

else{

// code for IE6, IE5

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

}

return xmlhttp;

}

【AJAX的入门】

ØAJAX的编写的步骤:

Ø* 第一步:创建一个异步对象.

* 第二步:设置对象状态改变触发一个函数.

* 第三步:设置向后台提交的路径

* 第四步:发送请求.

ØGET方式提交请求:

function ajax_get() {

// 1.创建异步对象

var xhr = createXMLHttp();

// 2.设置状态改变的监听 回调函数.

xhr.onreadystatechange = function(){

if(xhr.readyState == 4 && xhr.status == 200){ // 请求发送成功 // 响应也成功

// 获得响应的数据:

var data = xhr.responseText;

// 将数据写入到DIV中:

document.getElementById("d1").innerHTML = data;

}

}

// 3.设置请求路径

xhr.open("GET","/day15/ServletDemo1?name=aaa&pass=123",true);

// 4.发送请求

xhr.send();

}

ØPOST方式提交请求:

function ajax_post(){

// 创建异步对象:

var xhr = createXMLHttp();

// 设置监听:

xhr.onreadystatechange = function(){

if(xhr.readyState == 4 && xhr.status == 200){ // 请求发送成功 // 响应也成功

// 获得响应的数据:

var data = xhr.responseText;

// 将数据写入到DIV中:

document.getElementById("d1").innerHTML = data;

}

}

// 打开路径:

xhr.open("POST","/day15/ServletDemo1",true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

// 发送请求 post携带参数:

xhr.send("name=张三&pass=123");

}

1、获取xmlhttprequest对象

将获取xmlhttprequest对象的js代码单独封装到一个js文件,在需要的jsp页面中导入

var xhr = getXMLHttpRequest();

2、打开连接

xhr.open(“get|post”,”请求的资源路径”,true);

3、发送数据

xhr.send(“携带 参数,仅限于post方式”);

4、设置onreadystatechange事件对应的函数

5、在函数中判断readyState==4 && status == 200

6、使用responseText获取响应的数据

1.6.案例:

1.6.1.面页准备:

1.6.2.Ajax代码

后台servlet代码

1.7.案例:

1.7.1.Jquery代码:

$(function(){

//获取input标签

$("#username").blur(function(){//给用户名绑定一个离焦事件

// alert(000);

//获取用户输入的信息

var username = $(this).val();

// alert(username);字母 数字 下划线

if( !username.match("^\w$")){

//如果用户输入的不符合校验就给用户一个错误提示。把错误提示写到span里

$("#username_res").html("用户名必须由4~12位字母,数字,下划线组成");

}else{

$.ajax({

type: "POST",

url: "$/demo",

data: "username="+username,

success: function(data){

$("#username_res").html(data);

}

});

}

});

});

//清楚请输入用户名

function clearUserName(){

//获取input标签

var input_name = document.getElementById("username");

//判断value值里的内容(请输入用户名)

if(input_name.value == "请输入用户名"){

input_name.value="";

}

}

1.7.2.Servlet代码:

关注本文评论区提供java学习地

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180318A14QZF00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券