- Ajax教程之使用Ajax判断用户名是否可用 11-25
- web多图上传 11-25
- 什么是ajax技术 11-25
- 「jQuery + Ajax」Ajax的基础使用方法 11-25
- 开发一定要看的Ajax编程 11-25
- AJAX跨域轻松配置nginx允许多个域名跨域访问 11-25
- 超炫Ajax多文件无刷新上传 11-25
- MISS带你了解更多实用的PHP开发辅助工具 11-25
- Ajax教程之Ajax初识 11-25
- AJAX get() 和 post() 方法 11-25
Ajax教程之使用Ajax判断用户名是否可用
发布者: superzhang | 发布时间:2017-11-25•需求说明
–判断用户名是否可用
•实现步骤
–给用户名文本框绑定onblur事件
–开发服务器端判断用户的是否可用功能
–使用Ajax完成功能
创建XMLHttpRequest对象
建立到服务器的连接
设置服务器在完成后要运行的回调函数
发送请求
总结1:Ajax执行过程
•第一步:创建XMLHttpRequest对象
–不同浏览器创建方式不同
–可以提取为方法供调用
function createXMLHttpRe
web多图上传
发布者: superzhang | 发布时间:2017-11-25上一篇文章讲了web上传图片的几种方法,主要是针对于单图上传,这一篇文章将讲述多图上传。
1.表单上传
除了上一篇文章提到的表单上传注意事项之外,多图上传需要用到<input>的multiple属性。
表单上传
2.ajax上传
ajax和FormData实现页面无刷新文件上传。
ajax上传
此种方式需要注意一个问题,就是上图ajax中processData和contentType的设置。若注释掉这两行代码,会如下错误,
1.什么是ajax技术
ajax技术的中文意思为:异步js和xml.
所以其实ajax是有两种老技术共同开出了一朵鲜花.
①什么是异步和同步呢?
同步:一般来说,我们的客户端请求服务器,都是等待服务器响应完毕后,才可以继续发出下一个请求的.
异步:不需要等待服务器响应完毕,可以一口气连续发几个请求.
另外,同步的刷新往往是刷新整一个页面,因为服务器响应的是一个html文档.
然而,ajax的异步刷新可以是局部的刷新,同时服务器返回的是数据,至于数据的格式可以是xml,也可以是json.早期是使用xml格式的,所以才有ajax这个名字,异步的js和xml,但是现在的ajax更加喜欢json格式的数据.
而且,还有一般原来的js是不可以发出请求的,只好在客户端里面玩耍.但是在ajax里面的js是可以发出请求的.
2.ajax的应用场景
其实ajax的应用场景还是挺多的,简单来说,只要是需要异步请求的,不想等待的,
「jQuery + Ajax」Ajax的基础使用方法新手教程
发布者: superzhang | 发布时间:2017-11-25各位客官好,今天小编为大家简单描述一下Ajax怎么使用,这篇帖子只针对刚刚接触前端的新客官。
首先,如果说让小编写JS原生的Ajax,小编是真的写不出来,小编是认为jQuery的写法可读性易懂性都非常高,小编是推荐引一个jQuery的( PS:其实是小编菜 ),下面开始我们的准备工作,一个jQuery和一个HTML。
准备工作完毕,下面我们开始正式编写Ajax,Ajax的写法有很多种,下面小编就为客官们写一个我们最常用的写法,我会将注释写好,客官们可以看一下。
开发一定要看的Ajax编程
发布者: superzhang | 发布时间:2017-11-25Ajax编程入门
1.web交互的2种模式对比
①:2种交互模式的流程
②:2种交互模式用户体验
同步交互模式:客户端提交请求,等待,在响应回到客户端前,客户端无法进行其他操作
异步交互模型:客户端将请求提交给Ajax引擎,客户端可以继续操作,由Ajax引擎来完成与服务武器端通信,当响应回来后,Ajax引擎会更新客户页面,在客户端提交请求后,用户可以继续操作,而无需等待 。
2.Ajax快速入门
①:开发步骤
1).创建XMLHttpRequest对象
2).将状态触发器绑定到一个函数
3).使用open方法建立与服务器的连接
4).向服务器端发送数据
5).在回调函数中对返回数据进行处理
Demo:
<script type="text/javascript">
// 第一步 创建XMLHttpRequest
func
AJAX跨域轻松配置nginx允许多个域名跨域访问
发布者: superzhang | 发布时间:2017-11-25跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。所谓同源是指,域名,协议,端口相同。浏览器执行javascript脚本时,会检查这个脚本属于那个页面,如果不是同源页面,就不会被执行。同源策略的目的,是防止黑客做一些做奸犯科的勾当。比如说,如果一个银行的一个应用允许用户上传网页,如果没有同源策略,黑客可以编写一个登陆表单提交到自己的服务器上,得到一个看上去相当高大上的页面。黑客把这个页面通过邮件等发给用户,用户误认为这是某银行的主网页进行登陆,就会泄露自己的用户数据。而因为浏览器的同源策略,黑客无法收到表单数据。
我们在开发的过程很容易遇到跨域的问题,下面用nginx 配置解决nginx 多域名跨域的问题
当浏览器发起Ajax请求到其他域名时,会出现跨域的问题,在nginx上的解决方案是配置Access-Control-Allow-Origin来解决,但是当我们需要允许多个域名跨域访问时却不好配
超炫Ajax多文件无刷新上传
发布者: superzhang | 发布时间:2017-11-25一、使用jquery.form.js进行无刷新上传文件,这种方式直接使用form表单(无iframe)实现
简单效果如下(样式可进行调配):
左边为点击“添加图片”选择文件,即可通过form的ajaxSubmit方法提交,上传完根据返回数据即可看到效果,具体实现如下:
第一步,设置“添加图片”触发按钮
第二步,在页面任何位置放置,注意设置form,height:0;width:0;看到不占符行了:
2. Monsta FTP
Monsta FTP是一个基于Web并且开源的FTP应用,它采用PHP开发,并拥有一个ajax界面,很容易更换皮肤。上传和删除文件都可以采用拖拉操作,支持一次性操作多个文件。这是开发PHP项目的一个非常不错的组件。
3. Phalcon PHP
Phalcon 是一个开源的、全堆栈、松耦合
Ajax教程之Ajax初识
发布者: superzhang | 发布时间:2017-11-25展示效果并认识Ajax
•需求说明:
–演示最终Ajax效果
–提供Ajax素材
•方案1:传统方案
–提交表单,服务器端处理,错误后跳转到注册页面,同时显示错误信息。返回客户端的使用整个注册页面。
–缺点:较大的网络流量,用户体验不好
•方案2:使用Ajax方案。
–用户名的确认和用户书写其他表单项可以同时进行;返回客户端的至少错误信息;
–优点:较小的网络流量,用户体验好
AJAX get() 和 post() 方法
发布者: superzhang | 发布时间:2017-11-25jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
HTTP 请求:GET vs. POST
两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。
jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法:
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下
