js高级与easyUI框架
一、JavaScript高级
1.ajax请求
ajax：局部刷新技术
使用场景：分页数据的刷新，二级联动，验证用户名是否重复，地图局部刷新
核心对象： JavaScript 对象 XMLHttpRequest
原生js:ajax使用：
1.一个事件监听：onreadystatechange
onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数
2.两个状态 status readystatus
status ：
200: "OK" 请求成功
404: "NOT FOUND" 没有找到对应资源
500:"Server Error" 服务器端错误
readystatus：
存有 XMLHttpRequest对象的请求状态。从 0 到 4 发生变化。
0: 请求未初始化 未创建
1: 服务器连接已建立 open()方法
2: 请求已接收 send()方法
3: 请求处理中 服务器处理中
4: 请求已完成，且响应已就绪 响应完毕
3.三个方法 open send setRequestHeader
open(method,url,async)
创建请求，并且规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步），一定要选择true或 false（同步）
send(string)
将请求发送到服务器。
string：仅用于 POST 请求，字符串必须是服务器URL编码格式（列如：param1=value1¶m2=value2）;
setRequestHeader(header,value) ,添加额外的请求头信息，post提交必须使用
向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值
注意：该方法必须在open与send之间调用；
原因：
1、open之后，open是创建一个请求，或者理解为请求的基本准备，如果没有请求，何来设置请求头信息；
2、send之前，send是发送一个请求，请求会把当前请求的头信息进行发送，发送后设置头信息无效；
post提交必须使用：xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
例子：
<script type="text/javascript">
function check(name){
var ajax;
try {
//如果是其它浏览器，这句代码可以成功,ajax对象就拿到了
ajax = new XMLHttpRequest();
} catch (e) {
//如果是IE，上面肯定会报错，被抓取,就执行下面这句代码(IE支持)
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
//拿到前台的用户名
var username=name.value;
//开启访问请求
ajax.open("GET","/getUsername?username="+username,true);
//监听事件
ajax.onreadystatechange =function(){
if(ajax.readyState==4&&ajax.status==200){
alert(ajax.responseText);
//后台都以字符串形式传到前台
if(ajax.responseText=="true"){
document.getElementById("mySpan").innerHTML="<font color='red'>用户太受欢迎</font>";
}else{
document.getElementById("mySpan").innerHTML="<font color='green'>放心食用</font>";
}
}
}
//发送请求
ajax.send();
}
</script>
二、json
json：一种特殊定义的用来，网络传输的字符串，它有着特殊的格式，且存在json对象，可以直接取值，使用方便
json格式：[{“name”:“sss”,“age”:18},{“name”:“mmm”,“age”:18}]
json字符串与json对象的转换：
json字符串—>json对象：
1.var jsonobj=json.eval("("+jsonstr+")")
2.var jsonobj=JSON.parse(jsonstr)注意此方式必须json字符串是标准字符串格式
json对象—>json字符串
var jsonstr=‘jsonobj’;
案列：原生js ajax和json模拟登陆
需求：利用原生js ajax和json模拟登陆
思路：前台通过元素拿到对应的用户名和密码，将用户名和密码通过ajax请求传递到后台，后台判断数据是否正确，将信息以json字符串的方式传递到前台，前台将json字符串 转换为json对象，取出信息
注意事项：post请求需要添加请求头信息
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
`
</head>
<body>
用户名：<input type="text" id="username" />
密码：<input type="text" id="pwd" />
<input type="button" onclick="check()" value="登录"/>
<span id="mySpan"></span>
</body>
<script type="text/javascript">
function check(){
var ajax;
try {
//如果是其它浏览器，这句代码可以成功,ajax对象就拿到了
ajax = new XMLHttpRequest();
} catch (e) {
//如果是IE，上面肯定会报错，被抓取,就执行下面这句代码(IE支持)
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
//拿到前台的用户名
var username=document.getElementById("username").value;
var pwd=document.getElementById("pwd").value;
ajax.open("POST","/getUser",true);
ajax.onreadystatechange =function(){
if(ajax.readyState==4&&ajax.status==200){
//后台都以字符串形式传到前台
/* if(ajax.responseText=="true"){
document.getElementById("mySpan").innerHTML="<font color='red'>登录成功</font>";
}else{
document.getElementById("mySpan").innerHTML="<font color='green'>登录失败</font>";
}
}*/
var jsonobj=eval("("+ajax.responseText+")");
if(jsonobj.isEnable){
document.getElementById("mySpan").innerHTML="<font color='red'>登录成功</font>";
}else{
document.getElementById("mySpan").innerHTML="<font color='green'>登录失败</font>";
}
}
}
//设置请求头信息
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var parmet="username="+username+"&pwd="+pwd;
alert(parmet);
ajax.send(parmet);
}
</script>
三、jQuery框架
jQuery：基于JavaScript的前端框架
特点：标签选择器、插件多、链式语法
jQuery操作：
1.引入jQuery依赖的js
2.jQuery的语法
$===jQuery
3.jQuery对象与dom对象
Dom对象：document.getElementById(“id”)
jQuery对象：$(“#id”)
Dom对象与jQuery对象的转换
Dom---->jquery
$(domobj)
Jquery—>Dom
Jqueryobj[0]
4.jQuery的选择器
1.id选择器
$("#id")当id重复时以第一个id有效
2.类选择器
$(".class")标签中有class相同都会被选中
3.元素选择器
$(“div”)所有div都效果
4.所有元素选择器
$("*")
5.多元素选择器
$(“div input”)
6.层选择器
$("#父标签 子标签") 对于父标签下的所有标签都有效
$("#book li")
<ul id="book">
<li>西游记</li>
<li class="history">水许传</li>
<li id="redDream">红楼梦</li>
<li class="history">
三国
<ul>
<li>魏</li>
<li>蜀</li>
<li>吴</li>
</ul>
</li>
</ul>
$("#book >li")在给定元素匹配所有子元素
<ul id="book">
<li>西游记</li>
<li class="history">水许传</li>
<li id="redDream">红楼梦</li>
<li class="history">
</li>
<ul>
<li>魏</li>
<li>蜀</li>
<li>吴</li>
</ul>
</ul>
7.$(“form+input”)表示form外面相邻的一个input
8. $(“form~input”)表示form同辈的所有input
5.jQuery里面的事件
jQuery事件写法：
1.注册事件KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲id”).click(func…(“#id”).on(‘click’,function(){})
3.取消事件KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲id”).off(“click…(“#id”).unbind(“click”)
6.案例：jQuery ajax二级联动
需求：需要在省份的选择同时刷新出对应身份城市的选择
思路：需要使用ajax请求和jQuery发送请求，json对象传输
步骤：
后台：1.将省份和城市封装在两个对象，且各自有通过id查询到地址的方法， 且城市的查询是通过省份的id 省份的id通过前台传来
2.将查询的数据，通过json对象传递到前台
前台：1.打开网页查询省份信息得到前台传来的省份数据
2.将省份的id通过jQuery的ajax请求传递到后台
3.得到城市数据显示出来
city:
省份：
servlet:
四、easyUI框架
esayui框架:基于jQuery的UI插件集合
特点：多插件，基于jQuery
easyUI操作：
1.引入easyUI依赖
<!-- easyui的样式主题文件 -->
<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
<!-- easyui的系统图标-->
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
<!-- easyui依赖的jquery库-->
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<!-- easyui的插件库-->
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
<!-- easyui的汉化包 -->
<script type="text/javascript" src="/easyui/locale/easyui-lang-zh_CN.js"></script>
2.组件三要素
属性、方法、事件
使用easyUI需要实现某个功能的时候：
1.找到对应的组件，在标签注册相应的组件功能 比如class=“easyui-tabs”
2.在找到相应的标签调用组件的方法或者属性
扫一扫
1267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
