博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ajax校验
阅读量:4973 次
发布时间:2019-06-12

本文共 2156 字,大约阅读时间需要 7 分钟。


一、Ajax简介

AJAX即(Asynchronous JavaScript and Xml)(异步JavaScript和XML),是指一种创建交互式应用的网页开发技术。

Ajax的关键元素包括以下内容:

① JavaScript语言:Ajax技术的主要开发语言。

② XML/JSON/HTML等:用来封装请求或响应的数据格式

③ DOM(文档对象模型):通过DOM属性或方法修改页面元素,实现页面局部刷新

④ CSS:改变样式,美化页面效果,提升用户体验度

⑤ Ajax引擎:即XMLHttpRequest对象,以异步方式在客户端与服务器之间传递数据。

二、Ajax工作流程

三、常用方法:

四、常用属性

五、实现思路:

  1、锁定用户名文本框,注册onblur事件

  2、创建XMLHttpRequest对象。通过window.XMLHttpRequest的返回值判断创建XMLHttpRequest对象的方式

  3、设置回调函数。通过onreadystatechange属性设置回调函数,其中回调函数需要自定义

  4、初始化XMLHttpRequest对象。通过open()设置请求的发送方式和路径

  5、发送请求

jsp页面:

    用户名: 
密码:

创建Servlet:回送信息

public void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        String uname = request.getParameter("uname");        if (uname.equals("admin")) {            //用户已经被注册了            //回送 信息            response.getWriter().write("OK");                    }else {            response.getWriter().write("NO");        }

注意:

步骤一:通过window。XMLHttpRequest的返回值判断当前浏览器创建XMLHttpRequest对象的方式。如果为true,说明是新版本IE或其他浏览器,可使用new XMLHttpRequest()方式创建XMLHttpRequest对象;如果为false,说明是老版本IE浏览器,需使用new ActiveXObject("Microsoft.XMLHttp")的方式创建XMLHttpRequest对象

步骤二:通过XMLHttpRequest对象的onreadystatechange属性设置回调函数,用于当请求成功后接收服务器端返回的数据

步骤三:通过XMLHttpRequest对象的open()方法,传入参数完成初始化XMLHttpRequest对象的工作。第一个参数为Http请求方式,选择发送Httpget 请求,因此参数为get。第二个参数为要发送的url请求路径,将要发送的数据附加到url路径后面

步骤四:调用XMLHttpRequest对象的send()方法,参数为要发送到服务器端的数据,因为采用"get"方式请求时,参数已经附加到url路径后,所以直接设置为null。如果send()方法不设值,在不同的浏览器下可能存在不兼容问题。

执行完毕后,异步请求的发送过程就结束!

注:使用Ajax发送Post请求需注意要设置setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

      采用Get方式发送请求时,通常会将需要携带的参数附加在URL路径后面一起发送,所以send()不需要传递参数,设置为null即可


六 、使用jQuery实现Ajax 

jQuery常用的Ajax方法

语法:$.ajax([settings]);

 常用属性参数:

 常用函数参数:

 使用$.ajax()验证用户名--使用$.ajax() 实现异步交互

注:需引jquery-1.11.1.js库

              My JSP 'index.jsp' starting page                    

使用jQuery实现Ajax

用户名:
密码:

实现效果:

 若输入的非admin,即可注册,否则无法注册

若是post请求,调试效果如下:


七、JSON简介

 JavaScript Object Notation是一种轻量级的数据交换格式

①定义Json对象

语法:var json对象={key:value,key:value,...}

② 定义Json数组

语法:var json数组=[value,value,...] 

那么即可拿到每个dom对象:



 

校验完毕,你放心,我安心。

 

 

 

转载于:https://www.cnblogs.com/hq-123/p/5960547.html

你可能感兴趣的文章
P3565 [POI2014]HOT-Hotels
查看>>
MongoDB的简单使用
查看>>
prometheus配置
查看>>
【noip2004】虫食算——剪枝DFS
查看>>
python 多进程和多线程的区别
查看>>
sigar
查看>>
iOS7自定义statusbar和navigationbar的若干问题
查看>>
[Locked] Wiggle Sort
查看>>
deque
查看>>
c#中从string数组转换到int数组
查看>>
数据模型(LP32 ILP32 LP64 LLP64 ILP64 )
查看>>
java小技巧
查看>>
POJ 3204 Ikki's Story I - Road Reconstruction
查看>>
iOS 加载图片选择imageNamed 方法还是 imageWithContentsOfFile?
查看>>
toad for oracle中文显示乱码
查看>>
SQL中Group By的使用
查看>>
两个表格中数据不用是一一对应关系--来筛选不同数据,或者相同数据
查看>>
hiho_offer收割18_题解报告_差第四题
查看>>
AngularJs表单验证
查看>>
静态方法是否属于线程安全
查看>>