龙空技术网

AJAX使用介绍

谁的大数据 648

前言:

目前同学们对“ajax返回值xml中文乱码”可能比较着重,你们都想要学习一些“ajax返回值xml中文乱码”的相关内容。那么小编同时在网摘上汇集了一些对于“ajax返回值xml中文乱码””的相关知识,希望我们能喜欢,看官们一起来了解一下吧!

Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。AJAX可以更新部分页面,而不需要整个刷新,从而提升用户体验。

XMLHttpRequest 对象

是Ajax的核心,所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

创建方法:

var xhr = new XMLHttpRequest();

常用方法:

open("GET/POST","URL地址",true/false) 打开连接

true和false代表异步或同步。

同步表示需要等待服务器响应后才能执行后面的代码

异步表示不需要等待服务器响应,响应后会进行通知

推荐使用异步方式。

send(String) 发送请求

如果是POST方法需要填写请求参数,如:"name=zhang&age=20"

如果是Get方法参数可以不写

onreadystatechange事件回调,监听连接状态改变

用法:

onreadystatechange = function(){...};

常用属性:

readyState 连接状态

ajax共有5种状态:

状态

名称

描述

Uninitialized

初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。

1

Open

open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。

2

Sent

Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。

3

Receiving

所有响应头部都已经接收到。响应体开始接收但未完成。

4

Loaded

HTTP 响应已经完全接收。

responseText 服务器响应文本内容

status 响应码、如:200、404、500等

案例:使用ajax和Servlet进行交互

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>

<script type="text/javascript">

$(function(){

$("#div1").click(function(){

//创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

//打开连接

xhr.open("GET","ajax.do?name=张三",true);

//发送请求

xhr.send(null);

//监听状态改变事件

xhr.onreadystatechange = function(){

console.log("状态:"+xhr.readyState);

if(xhr.readyState == 4 && xhr.status == 200){

//更新页面内容

$("#div1").text(xhr.responseText);

}

};

});

});

</script>

</head>

<body>

<div id="div1">点击我连接服务器</div>

</body>

</html>

@WebServlet("/ajax.do")

public class AjaxServlet extends HttpServlet{

@Override

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

resp.setContentType("text/html;charset=UTF-8");

//处理请求的中文乱码

String name = req.getParameter("name");

name = new String(name.getBytes("ISO-8859-1"),"UTF-8");

//给ajax客户端发送数据

resp.getWriter().println("你好!!"+name+",我是服务器!!");

}

}

JQuery中的Ajax函数:

除了原生的Ajax代码外,JQuery框架也封装了几个ajax函数,让我们能更容易地与服务器交互。

$.ajax

常用参数:

type 请求方法GET、POST

url 服务器地址(必须)

data 请求参数

async 是否异步true,false

success 正常情况调用函数

error 错误情况调用函数

示例:

$.ajax({url:'check.do',data:{tel:‘13001112222’},async:true,

success:function(data){

alert('服务器返回内容'+data);

},

error:function(){

alert('服务器操作出现错误');

}

});

$.post函数

以post方式和服务器交互

$.post("URL地址",{参数名:值},function(data){

回调代码

});

案例:

//使用jquery的post方法

function post(){

$.post("ajax.do",{name:'李四'},function(data){

$("#div1").text(data);

});

}

$.get 函数

以get方式和服务器交互

$.get("URL地址?参数",function(data){

回调代码

});

案例:

//使用jquery的get方法

function get(){

$.get("ajax.do?name=赵六",function(data){

$("#div1").text(data);

});

}

load函数

使用load方法,将ajax加载的内容直接插入到标签中

案例:

$(function(){

$("#div1").click(function(){

//post();

//get();

$("#div1").load("ajax.do?name=马九");

});

});

应用场景:

用户注册时检查用户名是否存在

需求:用户注册时,填写手机号后,当输入框失去焦点时,对手机号进行服务器验证后在手机号输入框后面显示”用户名已存在"或"用户名可以使用";

思路:

1、在input的onblur事件中进行验证

2、通过ajax发送手机号给后台Servlet

3、Servlet对手机号进行数据库查询,返回是否存在的文字给ajax

4、ajax收到返回文字后,显示到标签上

总结:Ajax能够让浏览器和服务器进行交互,并且在不刷新页面的情况下对网页内容进行更新,大大提高了用户体验,通过Ajax技术能够构建交互性极强的Web应用程序。

标签: #ajax返回值xml中文乱码