例子:实现AJAX效果(投票例子)

后端代码

前端代码

原理是使用HTTP状态码204的特性(请求成功,但是不会返回内容,所以浏览器不会进行跳转)

例子:实现AJAX效果(投票例子2)

前端代码

原理是利用img,script等标签加载内容的特性

例子:实现AJAX效果(注册例子)

前端代码

后端代码

原理是利用iframe特性,将表单的target指向iframe后,服务器打印出来的内容会输出在iframe中

AJAX(XMLHttpRequest对象)

例子:发送GET请求

通过XMLHttpRequest对象还可以获取到响应信息里的内容

例子:发送POST请求

AJAX返回值类型

在AJAX1.0版本中AJAX的返回类型只有text和xml这两种类型

服务端返回xml数据处理

(1) 服务器响应的xml数据

(2)对xml数据进行处理

(3)处理后的xml数据

服务端返回json数据处理

(1) 服务器响应的json数据

(2) 对json数据进行处理

(3) 处理后的json数据

跨域问题

什么是跨域,跨域就是浏览器为了安全而不让不同域名之间可以进行消息通信,例如:http://www.xxx1.com不能与http://www.xxx2.com进行通信,http://www.xxx.com/xxx1不能与http://www.xxx.com/xxx2进行通信。当然并不是完全不能跨域比如<a><script><link><img>标签就能进行跨域,从其他域名网站中获取到数据。有时候我们异步到其他网站进行数据通信,这时候我们就能使用jsonp来解决,jsonp并不是什么特殊的技术,而是通过<script>能够跨域的特性,发送数据到服务器,服务器处理完数据后,返回一段JavaScript代码,通过这段代码调用本地写好的回调函数。

例子:jsonp

后端代码

前端代码

HTML5与AJAX

一般情况下有三种异步文件上传方式
(1)使用iframe上传文件
(2)使用flash上传文件
(3)使用HTML5的新API上传文件

例子:使用iframe上传文件

使用iframe上传文件大致分为以下几个步骤
(1)监听表单提交事件
(2)当表单提交时创建一个iframe,然后将表单的target指向iframe
(3)服务器上传成功后返回一段JavaScript代码,用于操作父页面的内容
前端代码

后端代码

例子:使用HTML5的FromData

前端代码

提交到后端的数据

例子:使用HTML5实现文件上传

前端代码

后端代码

上传后打印出来的信息

上传前

上传后

例子:利用xhr2新特性实现跨域

在HTML5中,AJAX的跨域有了新的规则,能否实现跨域取决于服务器的应答,服务器可以在响应的头信息中加上Access-Control-Allow-Origin这个header,它的值既可以是域名也可以是表示任意的域名)

例子:利用xhr2新特性实现大文件切割上传

后端代码

前端代码

例子:长连接技术

长连接技术主要是利用HTTP协议的特性,通过不给content-length指定长度,让HTTP连接一直不断开,实现单向长连接,使得服务器可以向浏览器一直推送消息,所以长连接技术也叫做服务器推技术。由于建立长连接会造成阻塞,所以长连接一般会配合iframe来使用。

后端代码

浏览器中显示的效果

Ajax 随笔的更多相关文章

  1. Ajax随笔

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  2. AJAX随笔1

    [1] AJAX简介   > 全称: Asynchronous JavaScript And XML   > 异步的JavaScript和XML   > AJAX就是通过JavaSc ...

  3. AJAX随笔2

    Ajax作用: 是用JavaScript向服务器发送异步请求,然后服务器给出响应,然后以XML格式的文件返回给浏览器端! 异步: 当浏览器向服务器发送请求的时候,不是整个页面刷新,而是局部刷新[局部信 ...

  4. 原生Ajax封装随笔

    XMLHttpRequest 对象用于和服务器交换数据.我们使用 XMLHttpRequest 对象的 open() 和 send() 方法: open(method,url,async) metho ...

  5. AJAX学习随笔

    AJAX名为“啊,贾克斯”,听着挺怪的哈. 主要的技术就是XMLHttpRequest对象和Javascript 度娘的解答: AJAX即“AsynchronousJavascriptAndXML”( ...

  6. php随笔2-php+ajax 实现输入读取数据库显示匹配信息

    dropbox_index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  7. 对ajax基础的掌握随笔

    原始的ajax,在第一个页面定义如下: function createAjax() { var xmlhttp; if (window.ActiveXObject) xmlhttp = new Act ...

  8. 学习随笔:Vue.js与Django交互以及Ajax和axios

    1. Vue.js地址 Staticfile CDN(国内): https://cdn.staticfile.org/vue/2.2.2/vue.min.js unpkg:会保持和npm发布的最新的版 ...

  9. Ajax与XMLHttpRequest随笔

    1.XMLHttpRequest对象 创建XHR对象:let xhr = new XMLHttpRequest(); open():启动一个请求准备发送 open()接收3个参数:请求类型('GET' ...

随机推荐

  1. 使用PHP创建一个REST API(译)

    最近API在网络领域有些风靡,明确的说是REST的影响力.这实在没什么好惊讶的,因为在任何编程语言中,消费REST API都是非常的容易.构建它也非常的简单,因为本质上你不会用到任何那些已存在很久的H ...

  2. python基础24 -----python中的各种锁

    一.全局解释器锁(GIL) 1.什么是全局解释器锁 在同一个进程中只要有一个线程获取了全局解释器(cpu)的使用权限,那么其他的线程就必须等待该线程的全局解释器(cpu)使 用权消失后才能使用全局解释 ...

  3. 微信小程序- wx.request请求不到数据

    小程序官方文档手册 https://mp.weixin.qq.com/debug/wxadoc/dev/ 小程序开发问答社区 http://www.henkuai.com/forum.php wx.r ...

  4. Keepalived 安装

    Keepalived 安装安装环境 keepalived-1.2.18.tar.gz VM虚拟机redhat6.5-x64:192.168.1.201 Xshell4 部署方案 201部署 安装步骤  ...

  5. python 简单的爬虫

    import urllib.request import re import ssl # 处理https请求 import time import os # 创建目录用 def get_html(ur ...

  6. Linux(CentOS)下同时启动两个tomcat

    问题背景:在配置nginx时,配置了两个tomcat,tomcat01和tomcat02,改了tomcat02中server.xml的端口,可是还是启动不起来. 解决方法: 一.编辑环境变量: 1 v ...

  7. python之路----包

    包 包是一种通过使用‘.模块名’来组织python模块名称空间的方式. 1. 无论是import形式还是from...import形式,凡是在导入语句中(而不是在使用时)遇到带点的,都要第一时间提高警 ...

  8. Java系列笔记(0) - 目录和概述

    笔者在开发过程中发现自己基础太薄弱,读书时除了系统学习了一下Java的基础语法和用法.一点简单的数据结构和设计模式之外,再无深入系统的学习,而工作中的学习也是东晃一枪西晃一枪,不够扎实和系统.想到一个 ...

  9. mysql的数据类型和字符集

    MySQL的数据类型 MySQL数据库支持的数据类型主要有以下几种: 整型 浮点型 字符 BLOB型 枚举和集合类型 JSON类型(MySQL5.7新增加的支持) 整型 整数类型是数据库中最基本的数据 ...

  10. Python Web学习笔记之并发和并行的区别和实现

    你吃饭吃到一半,电话来了,你一直到吃完了以后才去接,这就说明你不支持并发也不支持并行.你吃饭吃到一半,电话来了,你停了下来接了电话,接完后继续吃饭,这说明你支持并发.你吃饭吃到一半,电话来了,你一边打 ...