ajax

最新推荐文章于 2022-06-19 13:50:53 发布

yasuoi

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量87

点赞数

本文链接：https://blog.csdn.net/yasuoi/article/details/90045895

版权

1. Ajax简介

Ajax最初是由 Google公司在开发Google地图的使用，后来被大量使用

AJAX应用程序与浏览器和平台无关的

1. 怎么实现ajax(原生版)
Js原生版实现
Jquery实现

Js原生版实现

1 创建XMLHttpRequest对象

2 然后用这个对象操作open()方法即 XMLHttpRequest.open("post",url,true);

3 用这个对象操作onreadystatechange这个属性即XMLHttpRequest.onreadystatechange=callback; //指定响应函数

onreadystatechange=函数名; //注意这里直接加函数名，而不是function()，否则函数将无法正常执行

4 用这个对象操作send()方法即 XMLHttpRequest.send(null);

正确的顺序 1 3 2 4

先创建

再设置属性

然后打开

最后发送

案例：使用ajax来验证注册的用户名是否存在

代码

页面

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

span {

color: red;

}

</style>

function checkUser(username) {

//获取用户名的值

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

//使用ajax异步验证该用户名是否被注册

//1.创建xmlhttprequest对象

var xmlhttp;

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp = new XMLHttpRequest();

} else {// code for IE6, IE5

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

}

//2设置回调函数

xmlhttp.onreadystatechange=function(){

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

$("#checkuser").html(xmlhttp.responseText);

}

//3.open()

var url="UserServlet.htm?username="+uname;

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

//4send

xmlhttp.send();

}

</script>

</head>

<body>

用户名<input type="text" name="uname" onblur="checkUser(this);">

</form>

</body>

</html>

Servlet

package com.ajax.servlet;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/**

* Servlet implementation class UserServlet

@WebServlet("/UserServlet.htm")

public class UserServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

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

// 取

String username = request.getParameter("username");

PrintWriter pWriter = response.getWriter();

System.out.println("username:" + username);

if ("admin".equals(username)) {

pWriter.write("该用户已被注册");

} else {

pWriter.write("放心注册");

}

pWriter.flush();

pWriter.close();

}

/**

* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse

* response)

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

// TODO Auto-generated method stub

doGet(request, response);

}

1. Jquery实现Ajax

$.ajax({

url : "UserServlet.htm",

type : "get",

data : {

"username" : uname

dataType : "text",

success : function(data) {

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

}

});

1. Json

1. 1. JSON 语法规则

在 JS 语言中，一切都是对象。因此，任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等

案例: json表示对象

//1.定义json对象

var user = {

"id" : "001",

"username" : "kevin",

"pwd" : "88888"

};

$(function() {

$("#json").html(

"<ul><li>编号：" + user.id + "</li><li>用户名：" + user.username

+ "</li><li>密码：" + user.pwd + "</li></ul>");

});

</script>

</head>

<body>

</div>

</body>

</html>

Json表示普通的数组

$(function() {

//1定义json的普通数组

var country=["大中国","小日本","韩国棒子"];

//2将 json数组转为jquery对象

$(country).each(function(i){

$("#country").append('<option value="'+i+'" >'+this+'</option>');

});

</script>

</head>

<body>

国家:<select id="country">

</select>

</body>

</html>

Json表示对象数组动态添加到table

$(function() {

//1定义json的对象数组

var users = [ {

"id" : "001",

"username" : "kevin",

"pwd" : "88888"

}, {

"id" : "002",

"username" : "linda",

"pwd" : "6666"

}, {

"id" : "003",

"username" : "hanmeimei",

"pwd" : "77777"

} ];

//2将 json数组转为jquery对象

$(users).each(

function(i) {

$("#users").append(

'<tr><td>' + this.id + '</td><td>' + this.username

+ '</td><td>' + this.pwd + '</td></tr>');

});

</script>

</head>

<body>

<tr>

</tr>

</table>

</body>

</html>

yasuoi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax

Ajax简介 Ajax最初是由 Google公司在开发Google地图的使用，后来被大量使用AJAX应用程序与浏览器和平台无关的怎么实现ajax(原生版) Js原生版实现 Jquery实现Js原生版实现1 创建XMLHttpRequest对象2 然后用这个对象操作open()方法即 XMLHttpRequest.open("post",url...
复制链接

扫一扫

ajax

“相关推荐”对你有帮助么？