发表于： 2016-12-28 00:42:24
4 1662
今天完成的事情：重新了解了一遍ajax，印象更加深刻了，对ajax的运作流程有了更深刻的理解
明天计划完成的事情：重新看一遍angular，并且开始着手准备制作后三个列表页
遇到的问题：open（）的第二个参数是url，有时候是设置随机值，有时候是加个后缀，有时候是加str，这涉及到了后端的文件，这一块没有看太懂
收获：（修真院气氛好好的说~）
1.一个使用ajax修改文本内容的函数：
function loadXMLdoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{xmlhttp=new ActiveXObject('Mircosoft.XMLHTTP')};//用于检查是否支持，如果不支持，就创建一个IE专用的；
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
document.getElementById('myDiv').innerHTML=xmlhttp.responseText;
}
xmlhttp.open('GET',"/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
}
2.一个简单的请求数据
function loadXMLDoc(){
var xmlhttp;
if (window.XMLHttpRequest)();
{xmlhttp=new XMLHttpRequest();}
else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.opren("GET","/try/ajax/dem_get.php",true);
xmlhttp.send();
}
3.一个回调函数
var xmlhttp;
function loadXMLDoc(url,cfunc)//此乃回调函数，里面已经包含了ajax请求的种种
{
if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest}
else{xmlhttp=new ActiveXObject("Mircosoft.XMLHTTP")};
xmlhttp.onreadystatechange=cfunc;//亮点在这里，看到没，ocg就等于参数
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction(){//然后这个鬼函数里面又调用了回调函数，并且给其传参，当然，这个函数就是鼠标点击函数啦
loadXMLDoc("/try/ajax/ajax_info.txt",function(){//这时候回调函数的url改成具体url，然后给第二个参数也就是function（）加请求内容即可
if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
)
}
4.首先在input标签的内部加onekeyup=“ showHint(this.value)”
其次开始了函数的调用：
function showHint(str){//str对应标签内部的this.value，调用的时候，str=this.value，同时也是你键入的值
var xmlthhp;
if(str.length==0){ return};//如果表单里面没有内容，那就直接返回，不要ajax请求了；
if(window.XMLHttpRequest){xmlhttp=new XMLHttpRequest};
else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")}；
xmlhttp.onreadystatechange=function()//接下来请求成功就加东西
{
if (xmlhttp.readyState==4&&xmlhttp.sattus==200)
{
document.getElementById("input的辣个ID").innerHTML=xmlhttp.responseText;//关于url的参数，可以设置限制范围，但是是跟后端语言有关系，这一块就不是很清楚了；
}//请求成功了，加服务器的相应文件
xmlhttp.open("GET","url"+str,true);
xmlhttp.send();
}
5.先说说功能：首先给select标签设定onchange，内含一个showCustomer（this.value）；这个函数的作用就是当select的值变（也就是选了一个不一样的option标签）之后，在div里面展现不一样的服务器相应文本；那你怎么保证服务器相应文本不一样呢，就是通过open（）里面的url的值来决定的.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="">
<select name="customers" onchange="showCustomer(this.value)"
style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
</form>
<br>
<div id="txtHint">客户信息将显示在这...</div>
</body>
</html>
}
6.下面这个实例是，通过按按钮，获取表格数据：首先肯定是按钮绑定onclick事件；其次发送ajax请求；ajax请求函数里面，设置了一个循环，这个循环增加了一整个列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
}
</style>
</head>
<body>
<h1>XMLHttpRequest 对象</h1>
<button type="button" onclick="loadDoc()">获取我收藏的 CD</button>
<br><br>
<table id="demo"></table>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML; //这步用来获取服务器响应的XML，这时候是整个文件，内含表格CD
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD"); //这时候从整个文件中抽取CD，并把头一行赋给X
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>
返回列表
评论