//load方法的使用
  $('#loadBtn').click(function(){
   //responseTxt 包含来自请求的结果数据
//statusTxt 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）
//xhr 包含 XMLHttpRequest 对象
//如果想要调用txt中的其他的一个标签里边的内容，那么就直接这样写 js/demo_ajax_load.txt h2
$('.ajaxDiv').load('js/demo_ajax_load.txt',function(responseTxt,statusTxt,xhr){
if(statusTxt=='success'){
alert('异步加载成功')
}
if(statusTxt=='error'){
alert('出错：'+xhr.status+':'+xhr.statusTxt)
}
});
  });
  
  
  
  //get方法调用xml方法的基础使用
  $('#clickXML').click(function(){
   $.get('js/demo.xml',function(data){
$('#showXml').empty();
$(data).find('entry').each(function(){
var $entry = $(this);
var html = '<div class="entry"></div>';
html += '<h3 class="term">'+$entry.attr('term')+'</h3>';
html += '<div class="part">'+$entry.attr('part')+'</div>';
html += '<div class="definition">';
html += $entry.find('definition').text();
var $quote = $entry.find('quote');
if($quote.length){
html += '<div class="quote">';
$quote.find('line').each(function(){
html += '<div class="quote-line">' +$(this).text()+ '</div>';
});
if($quote.attr('author')){
html += '<div class="quote-author">' +$quote.attr('author')+ '</div>';
}
html += '</div>';
}
 
html += '</div>';
html += '</div>';
$('#showXml').append($(html));
});
});
return false;
});
 
 
  //getJSON的基础使用方法
  $('#clickJSON').click(function(){
   $.getJSON('js/text.json',function(data){
alert('成功了吗？');
$('#dictionary').empty();
$.each(data,function(entryIndex,entry){
var html = '<div class="entry">';
html += '<h3 class="term">'+entry['term']+'</h3>';
html += '<div class="part">'+entry['part']+'</div>';
html += '<div class="definition">'
html += entry['definition'];
if(entry['quote']){
html += '<div class="quote">';
$.each(entry['quote'],function(entryIndex,line){
html += '<div class="quote-line">' +line+ '</div>';
});
if(entry['author']){
html += '<div class="author">'+entry['author']+'</div>';
}
}
html += '</div>';
$('#dictionary').append(html);
});
});
return false;
});
  
 
 
  //getScript的基础使用方法
  $('#clickJS').click(function(){
   $.getScript("js/11.js",function(){
alert('ok');
});
return false;
});
  
  
  
  //javascript json 调用
  $('#getSZ').click(function(){
   var varJson =[
{name:'huanhuan',age:'23',city:'beijing'},
{name:'majie',age:'23',city:'beijing'},
{name:'tutu',age:'26',city:'wenzhou'}
];
varJson[0].name='wanghuan';
 
for(var i in varJson){
alert(varJson[i].name);
$('#varJson').html('name:' + varJson[i].name +'　'+ 'age:' + varJson[i].age +'　'+ 'city:' + varJson[i].city + '<br/>');
}
 
var json ={
options:[
{name:'lujuan',age:'23',city:'beijing'},
{name:'lucy',age:'20',city:'hangzhou'},
{name:'yuanyuan',age:'25',city:'wenzhou'}
]
};
json = eval(json.options);
for(var n=0; n<json.length; n++){
alert(json[n].name);
$('#varJson00').html('name:' + json[n].name +'　'+ 'age:' + json[n].age +'　'+ 'city:' + json[n].city + '<br/>');
}
 
 
$.each(varJson,function(s){
$('#varJson01').append('name:' + varJson[s].name +'　'+ 'age:' + varJson[s].age +'　'+ 'city:' + varJson[s].city + '<br/>');
});
 
 
});

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#clickJS').click(function(){
$.getScript("js/11.js",function(){
alert('ok');
});
return false;
});

$('#clickJSON').click(function(){
$.getJSON('js/text.json',function(data){
alert('成功了吗？');
$('#dictionary').empty();
$.each(data,function(entryIndex,entry){
var html = '<div class="entry">';
html += '<h3 class="term">'+entry['term']+'</h3>';
html += '<div class="part">'+entry['part']+'</div>';
html += '<div class="definition">'
html += entry['definition'];
if(entry['quote']){
html += '<div class="quote">';
$.each(entry['quote'],function(entryIndex,line){
html += '<div class="quote-line">' +line+ '</div>';
});
if(entry['author']){
html += '<div class="author">'+entry['author']+'</div>';
}
}
html += '</div>';
$('#dictionary').append(html);
});
});
return false;
});

$('#clickHTML').click(function(){
$('.htmlBox').load('demo.html');
return false;
});

$('#clickXML').click(function(){
$.get('js/demo.xml',function(data){
$('#showXml').empty();
$(data).find('entry').each(function(){
var $entry = $(this);
var html = '<div class="entry"></div>';
html += '<h3 class="term">'+$entry.attr('term')+'</h3>';
html += '<div class="part">'+$entry.attr('part')+'</div>';
html += '<div class="definition">';
html += $entry.find('definition').text();
var $quote = $entry.find('quote');
if($quote.length){
html += '<div class="quote">';
$quote.find('line').each(function(){
html += '<div class="quote-line">' +$(this).text()+ '</div>';
});
if($quote.attr('author')){
html += '<div class="quote-author">' +$quote.attr('author')+ '</div>';
}
html += '</div>';
}

html += '</div>';
html += '</div>';
$('#showXml').append($(html));
});
});
return false;
});

//javascript json 调用
$('#getSZ').click(function(){
var varJson =[
{name:'huanhuan',age:'23',city:'beijing'},
{name:'majie',age:'23',city:'beijing'},
{name:'tutu',age:'26',city:'wenzhou'}
];
varJson[0].name='wanghuan';

for(var i in varJson){
alert(varJson[i].name);
$('#varJson').html('name:' + varJson[i].name +'　'+ 'age:' + varJson[i].age +'　'+ 'city:' + varJson[i].city + '<br/>');
}

var json ={
options:[
{name:'lujuan',age:'23',city:'beijing'},
{name:'lucy',age:'20',city:'hangzhou'},
{name:'yuanyuan',age:'25',city:'wenzhou'}
]
};
json = eval(json.options);
for(var n=0; n<json.length; n++){
alert(json[n].name);
$('#varJson00').html('name:' + json[n].name +'　'+ 'age:' + json[n].age +'　'+ 'city:' + json[n].city + '<br/>');
}

$.each(varJson,function(s){
$('#varJson01').append('name:' + varJson[s].name +'　'+ 'age:' + varJson[s].age +'　'+ 'city:' + varJson[s].city + '<br/>');
});

});

$('#loadBtn').click(function(){
//responseTxt 包含来自请求的结果数据
//statusTxt 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）
//xhr 包含 XMLHttpRequest 对象
//如果想要调用txt中的其他的一个标签里边的内容，那么就直接这样写 js/demo_ajax_load.txt h2
$('.ajaxDiv').load('js/demo_ajax_load.txt',function(responseTxt,statusTxt,xhr){
if(statusTxt=='success'){
alert('异步加载成功')
}
if(statusTxt=='error'){
alert('出错：'+xhr.status+':'+xhr.statusTxt)
}
});
});

})
</script>
</head>
<body>

<input type="button" value="点击加载js文件" id="clickJS" />
<div id="dictionary"></div>
<input type="button" value="点击加载json文件" id="clickJSON" />
<div class="htmlBox"></div>
<input type="button" value="点击加载html文件" id="clickHTML" />
<div id="showXml"></div>
<input type="button" value="点击加载xml文件" id="clickXML" />

<div id="varJson">
for循环出来：
</div>
<div id="varJson00">
for循环出来2：
</div>
<div id="varJson01">
each遍历出来：
</div>
<input type="button" value="javascript json 调用" id="getSZ" />
<div class="ajaxDiv"></div>
<input type="button" value="点击加载txt文件" id="loadBtn" />
</body>
</html>

以前写过的ajax基础案例(王欢-huanhuan)的更多相关文章

  1. Ajax基础知识 浅析（含php基础语法知识）

    1.php基础语法    后缀名为.php的文件 (1) echo   向页面中输入字符串  <?php    所有php相关代码都要写在<?php ?>这个标签之中 echo &q ...

  2. _00017 Kafka的体系结构介绍以及Kafka入门案例(0基础案例+Java API的使用)

    博文作者:妳那伊抹微笑 itdog8 地址链接 : http://www.itdog8.com(个人链接) 博客地址:http://blog.csdn.net/u012185296 博文标题:_000 ...

  3. 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】

    一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...

  4. Ajax基础知识《一》

    对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...

  5. jQuery基础---Ajax基础教程

    jQuery基础---Ajax基础 内容提纲: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax ...

  6. Ajax基础知识（二）

    接上一篇  Ajax基础知识(一) 在上一篇博客里,抛弃了VS中新建aspx页面,拖个button写上C#代码的方式.使用ajax的方式,异步向服务器请求数据.我们让服务器只简单的返回一个" ...

  7. 原生AJAX基础讲解及兼容处理

    原文:原生AJAX基础讲解及兼容处理 AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML). AJAX不是新技术 ,但却是热门的技术.它 ...

  8. Web前端-Ajax基础技术(上)

    Web前端-Ajax基础技术(上) ajax是浏览器提供一套的api,用于向服务器发出请求,接受服务端返回的响应,通过javascript调用,实现通过代码控制请求与响应,实现网络编程. ajax发送 ...

  9. 第十三节 Ajax基础

    什么是服务器:简单地,可以说服务器就是一个内存超大的计算机,可以存放很多数据和文件(当然,如果不需要太多的数据存储量,我们也可以用电脑.手机等一系列小型计算机作为服务器,只不过性能的差别而已) 网页浏 ...

随机推荐

  1. java 日志技术汇总(log4j , Commons-logging,.....)

    前言 在Tomcat 与weblogic 中的 日志(log4j) 配置系列一 在系列一 中, 有一个问题一直没有解决,就是部署到weblogic 中应用程序如何通过log4j写日志到文件中? 这里仅 ...

  2. 使用Git push时出现的一些问题处理

    1.第一个问题 Permission denied (publickey). fatal: Could not read from remote repository. Please make sur ...

  3. Android 各种MIME类型和文件类型的匹配表

    MIME:全称Multipurpose Internet Mail Extensions,多功能Internet 邮件扩充服务.它是一种多用途网际邮件扩充协议,在1992年最早应用于电子邮件系统,但后 ...

  4. iOS-iPhone系统版本号-iPhone App版本号

    转载: http://blog.sina.com.cn/s/blog_7b9d64af0101bu9j.html 很多时候,我们需要获得用户iPhone版本号,或者App的当前版本号. 关心以下两个方 ...

  5. 杭电ACM1218——Blurred Vision

    题目有点长,并且比較难懂.看了非常久.也看的不是非常懂,仅仅知道输入输出的格式. 直到看了最后的一句话,也就是output那里的最后一句话,题目的意思就非常明白了,就是输出的每个点的像素是原始的四个像 ...

  6. scala编程笔记（三）类，字段和方法

    类,字段和方法 类是对象的蓝图,能够通过new来创建对象.在类的定义里能够有字段和方法.统称member val还是var都是指向对象的变量(var定义的字段可又一次赋值),def定义方法,包括可运行 ...

  7. [Canvas] Introduction to drawing with p5js

    In this lesson we look at using color and the basic drawing methods of p5js, and how they can be com ...

  8. cglib源码分析（一）： 缓存和KEY

    cglib是一个java 字节码的生成工具,它是对asm的进一步封装,提供了一系列class generator.研究cglib主要是因为它也提供了动态代理功能,这点和jdk的动态代理类似. 一. C ...

  9. PHP中的超级全局变量

    PHP内置了一些超级全局变量,我们可以在脚本的任何地方使用和可见,下面记录一下这些全局变量的作用: 1.$_SERVER $_SERVER超级全局变量包含由web服务器创建的信息,它提供了服务器和客户 ...

  10. JsonUtil对象与json互转

    OrderDto orderDto = JsonUtil.json2Object(json,     new TypeRef<OrderDto>() {     }); package c ...