AJAX - 技术教程文章

Javascript Ajax总结——XMLHttpRequest对象【代码】

Ajax技术能向服务器异步请求额外的数据,会带来更好的用户体验。Ajax技术核心:XMLHttpRequest对象(简称XHR)。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。1、创建XMLHttpRequest对象创建XMLHttpRequest对象:1var xhr = new XMLHttpRequest();注:IE7+、Firefox、Opera、Chrome和Safari支持原生XHR对象。(但是我测试IE5也支持原生XHR对象,可能是做了更新)IE7及之前的版本需要使用MSXML库中的XHR对象。如下所示,...

关于异步请求AJAX的详解

1,异步请求的方法步骤:1,判断当前用户支持的浏览器类型XMLHttpRequest:判断是否支持非IE浏览器,对应的创建方法:xmlhttp = new XMLHttpRequest();window.ActiveXObject:判断是否支持IE浏览器,对应的创建方法:xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");2,开辟连接创建路径xmlhttp.open(参数一,参数二,参数三);参数一:请求的方式get post参数二:请求路径参数三:表示是否是异步请求,true(是),false(不是)3,创建绑定方法判断...

详细讲一讲AJAX的GET/POST【代码】

一、POST/GET之我所见其实对于他们的区别,想必互联网上已经传遍了,无论大家怎么理解,对于我而言,我觉得,它们只有一个区别。就是一个有form,一个没有。怎么理解了,就是POST上传就类似我们在界面上的一个<form>,按下提交按钮后把form内的东西都传递到服务器去,当然你也可以不传递任何东西,如果在ajax的send时不传递任何东西,此时是没有form的,但但凡send里面有了数据,就自然有了form(包括abc=123这样的以及new FormData...

HtmlUnit爬取Ajax动态生成的页面内容【代码】

HtmlUnit说白了就是一个浏览器,这个浏览器是用Java写的无界面的浏览器,正因为其没有界面,因此执行的速度还是可以滴。HtmlUnit提供了一系列的API,这些API可以干的功能比较多,如表单的填充,表单的提交,模仿点击链接,由于内置了Rhinojs引擎,因此可以执行JavaScript  之前用的时候一直抓取不了Ajax动态生成table及其数据,用Firefox和IE浏览器查看网页源代码也看不到table和数据,但是用Firefox查看元素能看到信息  调研了H...

Spring boot + Shiro 在前后端分离时,ajax跨域问题(OPTIONS问题)【代码】【图】

在前后端分离时,遇到前端请求后报跨域 后台已经进行过spring boot 的统一跨域处理。按理说不会出现这个问题,因为跨域是指一个用户从网站A访问网站B的资源,导致出现一个跨域请求,一般出现在前后端分离项目的页面访问接口的时候。可即使处理过,依旧存在这个问题。我的情况是,前端页面登录可用,其余接口无法使用,初步怀疑是shiro的问题。在确认前端headers 中包含正确的权限字符串后。我就写了个过滤器,查看请求具体情...

开发分布式网络监控分析之前端ajax展现那些事【代码】【图】

周六自己在家甚是无聊,看到朋友们在讨论分布式监控分析,要的效果是 阿里测,17ce那种形式的,想查询监控啥的时候,在一个页面上能看到所以监控点提供的数据。比如,我想要查询针对一个url的get,dig数据。在这边直接采用zabbix、nagios的数据不太合理,因为我想要是给客服和客户用的界面。 像zabbix这样,咱们只能是提前先配置好。以前做过类似的全网监控检测,但是做的有些简陋,但也和这次聊的话题不一样,有兴趣的朋友可以看看...

MVC-强数据类型、TempData、多表单、ajax【代码】【图】

一、强数据类型将某一个或一组数据在控制器传递到视图上去一个视图里只能有一个强类型数据 强类型数据 - 将某一个或一组数据在控制器传递到视图上去,同ViewBag,数据更稳定,防止多数据传递中出现错误return view() 时传值,任意类型public ActionResult Update(string id){List<Nation> nlist = null;Users u = null;using (Data0928DataContext con = new Data0928DataContext()){u = con.Users.Where(r => r.UserName == id).F...

Django ajax post 403 问题【代码】【图】

方法一:在发送post请求的html页面前加入{% csrf_token %}方法二:在处理post数据的view前加@csrf_exempt装饰符例如[python] view plain copy @csrf_exempt def profile_delte(request): del_file=request.POST.get("delete_file",‘‘) 以上内容复制出处:http://blog.csdn.net/sherry_rui/article/details/50523725 同时在进行项目时遇到以下问题及解决方案:因需求在下拉框中绑定了change事件,只有select一改变,则exam_n...

spring mvc 和ajax异步交互完整实例【代码】

Spring MVC 异步交互demo:1.jsp页面:<%@ 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> <script type="text/javascript" src="js/jquery-2.1.3.js"></script> <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script> <meta http-e...

Checkbox框全选操作,form表单提交与jquery ajax提交两种处理方式【代码】【图】

//1.jquery ajax<script type="text/javascript">$(function(){var basePath = $("#basePath").val();//上架操作 $("#upAll").click(function(){var chk_value =""; $(‘input[name="ckID"]:checked‘).each(function(){chk_value += $(this).val()+","; });if(chk_value ==""){alert("请选择需要上架的项!!");return;}else{if(!confirm("确定上架吗?")){return;}}var addNetworkId = $("#addNetworkId").val();//al...

SSM项目用ajax来显示数据【代码】【图】

1 <script type="text/javascript">2//1:页面加载完成后,直接去发送ajax请求,要到分页的数据 3 $(function(){4 $.ajax({5 url:"${APP_PATH}/emps",6 data:"pn=1",7 type:"GET",8 success:function(result){9//1:解析并显示员工数据。10 build_emps_table(result); 11 } 1...

使用Echarts的时候ajax第二次请求的时候,图表会等待请求完成后才刷新出来【图】

在使用echarts图表的时候,选完条件后,ajax请求的过程中,因为请求的事件快慢的原因,导致图表会消失,给人的体验感贼差(虽然可以通过类似“信息加载中。。”来处理),查看自己的代码中发现了原因:var myChart1 = echarts.init(document.getElementById(‘app1‘));这句代码放在了function中,导致每次请求的时候每次都会声明一个mychart1的对象,导致图形页面有一段时间(请求的时间)的不显示;页面展示如下:部分代码如下(...

php与MySQL与ajax与echart综合【代码】【图】

http://www.yinghualuowu.com/php/echart.html创建table sex 有name num <?phpini_set(‘display_errors‘,1); //错误信息 ini_set(‘display_startup_errors‘,1); //php启动错误信息 error_reporting(-1); ini_set(‘error_log‘, dirname(__FILE__) . ‘/error3_log.txt‘);//打印出所有的 错误信息 require("config.php");$conn=mysqli_connect($mysql_server_name,$mysql_username,$mysql_passwo...

【JavaScript】新浪微博ajax请求后改变地址栏url,但页面不跳转的方案解析

新浪微博当你弹出一个视频的时候再点下一页时,原视频还在,而且地址栏的url的页数变了。对于这种网上讨论最多的方案有以下几种:一、通过锚点Hash实现在这方面其实国内很早就有做了,比如淘宝画报,通过的是在地址栏后面加#锚点实现的,浏览器是可以识别锚点为单位的历史记录的。但不是说页面本身有这个锚点,锚点的Hash只是起到一个引导浏览器将这次的记录推入历史记录栈顶的作用。二、通过HTML5加强型的History对象实现(类Pjax)...

数据传送与Ajax请求

传统的请求方式是通过表单来向服务器发送请求,这样的请求不可避免的会使得页面发生跳转或是刷新,从而使得带宽出现很大的浪费。为了解决这一问题,一种不能完全称之为新技术的新技术出现了,那就是Ajax技术,它很好的解决了这一问题,使得局部刷新成为可能。Ajax实质来说只是js的一个对象,它发送送请求也是通过这一对象来实现的。也就是XMLHttpRequest对象。所以,对Ajax的学习实际上也就是在对XMLHttpRequest对象的属性以及方法...

Ajax学习笔记【代码】【图】

Ajax(asynchronous javascript and xml)Ajax描述了一种主要使用脚本操纵HTTP的Web应用架构,主要特点是使用脚本操纵HTTP和Web服务器进行数据交换,不会导致页面重载 HTTP协议(HyperText Transfer Protocal):规定Web浏览器如何从Web服务器获取文档和向Web服务器提交表单内容,以及Web服务器如何响应这些请求和提交 分为请求报文和响应报文请求报文包括:请求行HTTP请求的方法(GET或POST)正在请求的URL2.请求头(可选,包含身...

datatable by Ajax 前端参数详解

Datatable 实现ajax动态分页、设计各列单元格dom格式。 id:表格id ordering:是否可以排序 paging:在所有表数据已加载完毕后,是否分页显示 Processing:是否异步载入未显示表格数据 aoColumnDefs:列控制,aTargets表示所选控制的列,mRender表示对所选列的操作。 bProcessing:加载数据时候是否显示进度条 serverSide:是否从服务器加载数据 tableTools:datatable 扩展工具库,本函数使用到excel导出按钮(按钮仅做事件触发器...

ajax跨域终极解决办法!【代码】

在使用 ajax 的时候,往往需要通过 ajax 跨域请求一些?但是 XMLHTTPRequest 是不支持跨域的,所以产生了 JSONP 这个东西来解决跨域,当然解决跨域的方式有很多种....第一种解决跨域:<script type=‘text/javascript‘ > (function(window){//AJAX获取界面信息 $(function(){$.ajax({// 豆瓣API接口 url:‘http://api.douban.com/v2/movie/in_theaters?count=2‘,dataType:"jsonp",jsonp:"callback",success:funct...

Ajax PHP 边学边练 之三 数据库【图】

本篇将继续通过该实例讲解与数据库的交互方式。实例中用到的是MySQL,也可以根据自己的需要替换为其他数据库,其连接方式可以参考PHP相关手册。 在下面源程序包中dbconnector.php 提供了与MySQL的连接函数。 复制代码 代码如下:<?php //定义数据连接变量 define ("MYSQLHOST", "localhost"); define ("MYSQLUSER", "root"); define ("MYSQLPASS", "root"); define ("MYSQLDB", "test"); function opendatabase(){ //连接数据库所在...

Ajax状态值及状态码

1- AJAX状态值与状态码区别AJAX状态值是指,运行AJAX所经历过的几种状态,无论访问是否成功都将响应的步骤,可以理解成为AJAX运行步骤。如:正在发送,正在响应等,由AJAX对象与服务器交互时所得;使用“ajax.readyState”获得。(由数字1~4单位数字组成)AJAX状态码是指,无论AJAX访问是否成功,由HTTP协议根据所提交的信息,服务器所返回的HTTP头信息代码,该信息使用“ajax.status”所获得;(由数字1XX,2XX三位数字组成,详细查...

jQuery框架中$.ajax()的常用参数有哪些?写一个post请求并带有发送数据和返回数据的样例【代码】

sync是否异步url请求地址contentType发送信息至服务器时内容编码类型data发送到服务器的数据dataType预期服务器返回的数据类型type请求类型success请求成功回调函数error请求失败回调函数 $.ajax({url: "/jquery/test1.txt",type: ‘post‘,data: {id: 1},success: function(data) {alert(data);}} 原文:http://www.cnblogs.com/wade1220/p/7182707.html

JavaWeb ajax编程(未完待续)

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

jQuery与Ajax的应用——《锋利的jQuery》(第2版)读书笔记3

第6章 jQuery与Ajax的应用jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load()、$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法。1、load()方法(1)载入HTML文档load()方法是jQuery中最简单和常用的Ajax方法,能载入远程HTML代码并插入DOM中。它的结构为:load(url [, data] [, callback]) 参数说明: url:请求HTML页面的URL地址; data(可选):发送至服务...

form通过ajax以json发送,接受json数据做处理【代码】

{% extends "base.html" %}{% block title %}register{% end %} {% block head %}<script type="text/javascript" src="{{ static_url(‘js/jquery-1.12.4.min.js‘) }}"></script><script type="text/javascript">function login() {var username = document.getElementById("user_name").value;var password = document.getElementById("pass_word").value;var mobile = document.getElementById("mobile").value;$.ajax({type: ...

Struts2-学习笔记系列(15)-ajax支持和JSON【代码】

7.1stream类型的result使用stream就无需jsp页面,直接在action想浏览者生成指定的响应 1 2 3@Override4public java.lang.String execute() throws Exception {5 stream = name.equals("zcx") ? new ByteArrayInputStream("登录成功".getBytes("UTF-8"))6 : new ByteArrayInputStream("登录失败".getBytes("UTF-8"));7return SUCCESS;8}910 7.2json引入struts-json-plugin.jar文件,在action result配置 type=’jso...

ajax无刷新绘图技术总结

在最近的一份项目当中,我发现我需要一份很重要的功能,就是实现动态的无刷新的更新数据,数据的显示为报表形式,这样的话,在我一开始的思考当中,就产生了一个很大的难度了,首先,因为服务器绘图技术本身就有一点难度,而且利用ajax无刷新的形式进行绘图就更有难度了,所以就思考怎么去完成这个项目。首先,我们第一次打开页面,如果数据是从服务器把数据从模板分配到视图页面的,这样显示了数据,然后就应该发送ajax请求,服务...

利用fastjson解析json并通过js&ajax实现页面的无跳转刷新【图】

1.json是一种优秀的数据格式,在移动开发和web开发中经常用到,本例中通过一个小案例讲解如何通过alibaba的开源框架fastjson来解析jason数据格式并通过js实现无跳转刷新2,新建一个web项目,这是我的项目:我这里直接用servlet写的注意导包,我这里到了很多无用的包,其实主要的包是下面几个:这个三个包是必须的,其他都是开发基本web的常用包3.创建一个domain:package com.keson.domain;import com.thoughtworks.xstream.annotat...

10.MVC框架开发(Ajax应用)【代码】【图】

1.MVC自带的Ajax应用,使用步骤:第一步,引入js框架<script src="../../Scripts/jquery-1.4.4.js" type="text/javascript"></script><script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script> 第二步,调用MVC里的Ajax方法 分情况 a.如果表单里有内容需要提交的,采用Ajax.BeginForm b.如果只是一个超链接,用Ajax.ActionLink,比如我们要用Url传参的形式做一本图书删除的操作,...

jquery ajax cache的问题

function test() { $.ajax({ type:‘GET‘, url:"tt.php", data:"page=112", success:function(msg) { alert(msg); } }) } </script> <a onclick="test()">test</a>/*ie下面只会建立一次 ajax 请求,将响应结果放在浏览器缓存里 下次调用该ajax请求时 从缓存里读取...

一个Ajax的XMLHttpRequest的open方法实例(只能兼容IE10及以上的浏览器)【代码】

Ajax的XMLHttpRequest的open方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>浏览器通过JS控制输入的地址参数不同获取服务器内容(只能兼容IE10及以上的浏览器)</title> <style> body{font-family: ‘宋体‘;} .wrap{width:95%;min-height: 350px;margin:0 auto;} .title{width:100%;font-size: 18px;color:#b34810;line-height: 37px;border-bottom:2px solid #b34810;} ...