AJAX,JQuery

不懂前端，工作需要先记下来

AJAX ：Asynchronous JAvaScript and XML

它可以在不刷新页面的情况下，就像背后运行的一根小线程一般，悄悄的和服务器进行数据交互，反馈给页面

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

<span>输入账号 :</span>
<input id="name" name="name" onkeyup="checkGET()" type="text"> 
<span id="checkResult"></span>
  
<script>
var xmlhttp;

function checkGET(){
  var name = document.getElementById("name").value;
  var url = "http://how2j.cn/study/checkName.jsp?name="+name;
  
  xmlhttp =new XMLHttpRequest();   //创建XHR对象 XMLHttpRequest
  xmlhttp.onreadystatechange=checkResult; //响应函数
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
//设置 请求方式,访问页面,true（异步）false（同步）
  xmlhttp.open("GET",url,true);  
//执行访问
  xmlhttp.send(); 
}
function checkPOST(){
  var name = document.getElementById("name").value;
  var url = "http://how2j.cn/study/checkName.jsp?";
  xmlhttp =new XMLHttpRequest();
  xmlhttp.onreadystatechange=checkResult;
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
  xmlhttp.open("POST",url,true);  
//执行访问，用"POST"发送参数的时候会使用到send参数。
  xmlhttp.send("lname=Ford"); 
}

function checkResult(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
}
</script>

JQuery是一个javascript的框架，是对javascript的一种封装。

要使用Jquery需要导入一个第三方的javascript库 jquery.min.js，

<script src="http://how2j.cn/study/jquery.min.js"></script>

//防止文档在完全加载之前运行 jQuery 代码。写在这里面的JQuery代码都是文档加载好之后的。
$(function(){
});
$(document).ready(function(){
});

//通过id获取元素
$("#id") 

//增加监听器
$("#button").click(function(){
   alert("点击了id为button的按钮");
});

//val()获取值,相当于 document.getElementById("ID").value
$("#ID").val()
//html()获取内容,如果有子元素，保留标签
$("#ID").html()
//text()获取内容,如果有子元素，不包含子元素标签
$("#ID").text()

JQuery有对AJAX的支持，使得其对AJAX的操作简化了很多

$.ajax({
   url: page,//发送请求的地址。
   type: 'POST',//请求方式 ("POST" 或 "GET")
   data:{"name":value},//发送到服务器的数据。将自动转换为请求字符串格式。
   async: true,//true=异步,false=同步
   cache: false,//dataType=cript和jsonp时为false,不缓存此页面
//由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
   success: function(result){
      alert(result);
   }
});

猜你喜欢