AJAX

最新推荐文章于 2024-04-03 16:49:25 发布

原创最新推荐文章于 2024-04-03 16:49:25 发布 · 448 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript

前端页面技术专栏收录该内容

1 篇文章

订阅专栏

本文深入讲解了Ajax技术的概念，包括其与同步请求的区别、编程实现、JSON数据交换格式及其在JavaScript中的应用，以及JQuery对Ajax请求的封装，最后对比了MySQL与Oracle数据库的特点。

AJAX

一、概念

Ajax即异步的Javascript和XML，是一种用于快速创建动态网页的技术。在无需加载整个网页的情况下，能够更新部分网页的技术。

同步请求和异步请求的区别

1.同步请求：传统的请求方式（超链接，地址栏，表单提交，location.href）
  特点：整张网页刷新。
2.异步请求：Ajax技术
  特点：多个事件同时发生，且互不影响，页面局部刷新。

二、Ajax编程

1.xhr核心对象

① 屏蔽浏览器差异：

var xhr;
if(window.XMLHttpRequest){
    xhr=XMLHttpRequest();
}else{
    xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

② 发送Ajax请求，并带数据

var name = document.getId("name");
//xhr初始化
xhr.open("get","${pageContext.request.contextPath}/reg?name="+name,true);
//发送ajax请求
xhr.send();

上面是get方式，post方式如下：

xhr.open("post","${pageContext.request.contextPath}/reg?name="+name,true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send("name="+name)

③ 处理响应结果

xhr.onreadystatechange=function(){
    if(xhr.readyState==4 && xhr.state==200){
        //处理完成，且结果正确
        var result = xhr.responseText;
        console.log(result);
    }
}

xhr.readyState：xhr的状态，5个值

0:刚刚创建
1:初始化
2:send请求已发出
3:正在处理请求
4:处理完成

xhr.onreadystatechange：监听readystate的属性值，发生改变时触发。

xhr.state：响应状态码

200：正常 
404：请求资源无效
500：server内部出错

xhr.responseText：响应结果（字符串）

三、JSON

概念：是一种轻量级的数据交换格式。

1.JSON格式：

单个对象：
var obj = {"属性名":值,"属性名":值,""......}
obj.属性名
数组（多个对象）
var obj = [10,"hello",true,{"name":"zhangsan","age":20}];

2.Javascript将响应中的JSON字符串转换为JS对象：

var obj=eval("("+result+")")

3.转换Java对象为JSON字符串

首先需要导入fastjson的jar包

String str = JSON.toJSONString(user);
//带日期格式的转换
String str2 = JSON.toJSONStringWithDateFormat(user,"yyyy-MM-dd")
//日期属性要加注解
@JSONField(format="yyyy年MM月dd日")

四、JQuery对Ajax请求的封装

发送get和post方式的ajax的请求

$.ajax({
    url:"${}",     	//要发送到的资源地址
    type:"",		//发送的格式get|post
    data:{"name":"张三"},		//发送的请求数据
    success:function(result,staus,XMLHttpRequest){},  //result请求返回结果，status返回状态
    dataType:"JSON" //预期的结果类型
})

2.get方式

$.get(url,请求数据，成功后的回调函数，与其的结果类型)

3.post方式

$.post(url,请求数据，成功后的回调函数，与其的结果类型)

MySQL数据库

Mysql和Oracle的区别：

Mysql中有明确的库表概念，必须先建库，再建表
Mysql中没有varchar2类型
Mysql中使用使用主键自动递增，oracle使用的是序列
Mysql的安全性高，可重复读
Mysql的分页语句比oracle简单

Java链接Mysql数据库：

导入jar包 mysql-connector-java

连接字符串

driver     com.mysql.jdbc.Driver
url          jdbc:mysql://ip:3306/数据库名称?characterEncoding=UTF-8