javaweb 之Ajax

AJAX

what: 一种改善客户端体验的技术。本质上就是在客户端使用js代码,通过浏览器中一个特殊的对象(XMLHttpRequest)异步(浏览器不会销毁当前的页面,客户可以在页面继续其他的操作而不被打断)的向服务器端发送请求,服务器端返回的是部分数据(可以是文本,xml,json),客户端接收到数据后,使用js将数据更新到页面中。整个过程没有页面的整体刷新,只是使用js进行局部刷新,用户操作不会被打断。

AJAX编程的主要步骤:

  1. 创建XMLHttpRequest对象

  2. 编写回调事件处理函数

  3. 创建请求

  4. 发送请求(最后一步才会触发回调函数)

创建XMLHttpRequest对象

a.     所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。

var variable;
variable=new XMLHttpRequest();

b. 老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:

    var variable;
    variable=new ActiveXObject("Microsoft.XMLHTTP");

c. 获取XMLHttpRequest对象的脚本:

function getXhr(){
	var variable;
	if(window.XMLHttpRequest){
		variable=new XMLHttpRequest();
	}else{
		variable=new ActiveXObject("Microsoft.XMLHTTP");
	}
	return variable;
}

编写回调事件处理函数

得到XMLHttpRequest对象之后,就可以编写回调事件处理函数了。

var xhr=getXhr();
xhr.onreadystatechange=function(){
    //这儿编写用户自定义处理函数,  xhr的状态值有5种, 0,1,2,3,4
    //这儿我们最关心的状态值是4 ,onreadystatechange函数中会触发2,3,4三种状态值
    alert(xhr.readyState);//那么我们可以看到3中状态值,2,3,4
}

创建请求

get请求

xhr.open(‘get‘,‘ajax.do‘,true)// 第一个参数为请求方式,get/post....  第二个参数为请求的url(参数可以直接附加在url后面)  第三个参数为是否是异步的请求true为是,false为否

get请求中文问题:

编码设置

js代码:

var uri=encodeURL(‘check?name=张三‘);
xhr.open(‘get‘,uri,true);
xhr.send();
后台代码:
String name=request.getParameter("name");
name=new String(name.getBytes("ISO8859-1"),"UTF-8");
修改tomcat的配置
在tomcat的conf目录下,找到server.xml中找到Connector 节点,添加属性  URLEncoding="utf-8"

post请求

xhr.open(‘post‘,‘ajax.do‘,true); // 普通的post请求可以直接这样使用
//如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后再send() 方法中规定您希望发送的数据:
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

post请求中文问题:


javaweb 之Ajax,布布扣,bubuko.com

时间: 2024-11-23 00:09:57

javaweb 之Ajax的相关文章

JavaWeb之Ajax快速入门(十九)

AJAX 1. AJAX简介 1. AJax是什么 允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做AJax,AJax不是新的编程语言是多种技术的结合形成一门新技术 AJAX = DHTML (HTML.CSS.JavaScript ) + XMLHttpRequest对象 2. AJax的特点 不适用于任何应用场景 导致逻辑处理混乱 Ajax是实现B\S模式下的异步交互 在实现同样的功能时,Ajax的性能更好 3. AJax的优点 1). 传统web交互模型,浏览器直接将请求发送给服务器

javaweb利用ajax使登录窗口不跳转页面实现对账号密码的判断

和上一篇判断用户名是否被占用不跳转页面类似!利用ajax实现跳转,要导入jquery文件库!具体代码我会贴出来,注释在里面!!可以观摩一手!(代码我也留下链接,如果失效,评论补发,代码可能导入也无法使用!!你们要自己配置一下路径,或者自己建文件复制粘贴吧!) login.jsp <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ pa

IT兄弟连 JavaWeb教程 AJAX中参数传递问题

使用Ajax发送GET请求并需要传递参数时,直接在URL地址后拼接参数,格式如下: xhr.open('get','请求路径?参数名1=参数值1&参数名2=参数值2...',true); 使用Ajax发送POSt请求并需要传递参数时,也可以直接在URL地址后拼接参数,这样的话和发送GET请求时没有区别,也可以在send方法中进行参数的传递,而且建议使用send方法进行参数传递,并且需要对请求头做特殊设置,设置Content-Type为URL编码方式,格式如下: xhr.setRequestHea

IT兄弟连 JavaWeb教程 AJAX常见问题

1 中文乱码问题 ● POST提交乱码 乱码原因:所有浏览器对Ajax请求参数都使用UTF-8进行编码,而服务器默认使用ISO-8859-1去解码,所以产生乱码. 解决方法:在服务器接收请求参数前设置解析编码. request.setCharacterEncoding("UTF-8"); ● GET提交乱码 乱码原因:IE浏览器发送请求时,会默认使用GBK字符集对请求参数进行编码,而其他浏览器会使用UTF-8.服务器默认情况下使用的时ISO-8859-1进行解码,所以产生乱码. 解决方

【JavaWeb】Ajax基础

Ajax介绍 Asynchronous JavaScript And XML(异步的JavaScript和XML): Ajax可以在不刷新页面的前提下,进行页面局部更新: Ajax不是新的技术,Ajax并不是W3C的标准: Ajax的使用流程 创建XmlHttpRequest对象 发送Ajax请求 处理服务器响应 处理服务器响应 xmlhttp.onreadystatechange()事件用于监听AJAX的执行过程 xmlhttp.readyState属性说明XMLHttpRequest当前状态

JavaWeb开发中form、ajax提交数据Model转化

JavaWeb开发中form.ajax提交数据Model转化 问题 最近学习MongoDB数据库,作为java开发的我,当然需要做个小的web程序来测试一番了.在html中我采取ajax提交方式,因为我要模拟各种类型的数据,基础数据类型.数组.对象等.然而,最终发现了个不同的地方:Form和ajax提交数据,在HttpServletRequest中尽然参数名有所不同. 数据类型 form ajax 基础数据 para=value para=value 数组 para[]={"aaa",

JavaWeb ajax编程(未完待续)

1.Ajax 1.1Ajax的定义 Ajax:(Asynchronous JavaScript And XML)指异步 JavaScript 及 XML. 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术,是基于JavaScript.XML.HTML.CSS新用法. Ajax:只刷新局部页面的技术 JavaScript:更新局部的网页 XML:一般用于请求数据和响应数据的封装 XMLHttpRequest对象:发送请求到服务器并获得返回结果 CSS:美化页面

【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件

Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯.这些特性使JSON成 为理想的数据交换语言.易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络

[JavaWeb基础] 017.Struts2 和 ajax交互简介

在网页开发中,我们为了只对网页的某块内容进行实时更新,而不对其他不需要更新的内容进行刷新,从而提高响应速度和节省流量,我们采用了页面的异步刷新技术Ajax,那么我们的Struts2框架在这一方面是如何实现的呢,其实也很简单,下面我带大家一起了解下. 1.首先我们需要导入两个依赖包json-lib 和 struts2-json-plugin,这是对json支持的解析包. 2.我们需要创建一个Action类,和其他的都一样 package com.babybus.sdteam.action; imp