J.chong

解決跨域問題：服务器代理或jsonp

1、script標籤；
2、在資料加載進來之前，定義好一個fn，fn接收一個參數，fn裏再拿數據；然後需要時通過script標籤加載對應的遠程文件資源，當遠程文件資源被加載時會執行前面定義好的fn，並且把數據當fn參數傳入；
如：1.txt内容为：

fn([1,2,3])

然后在html开头使用script定义fn，一定要放前面，如放window.onload 里，需使用window.fn(){..}这样调用

function fn(data) {
    alert(data)
}

之后下面window.onload

window.onload = function () {
    var btn = document.getElementById('btn')
    btn.onclick = function () {
        //当按钮点击时再去加载远程资源，让他执行；
        var _script = document.createElement('script')
        _script.src = '1.txt'
        document.body.appendChild(_script)
    }
}

因此，操作别的网站的json数据，主要是能够找到调用的命我空间，即，可以有callback=fn的函数

var _script = document.createElement('script')
_script.src = "http://suggestion.baidu.com/su?wd="+this.value+"&cb=elmok"
document.body.appendChild(_script)

3）、开头创建elmok函数使用数据；

function elmok(data){
    var _ul = document.getElementById('ul1')
    var html =''
    if(data.s.length){  //如果得到数据的长度不为0
        _ul.style.display = 'block'
        for(var i=0;i<data.s.length;i++){
            html+='<li><a target="_blank" href="https://www.baidu.com/s?&wd='+data.s[i]+'">'+data.s[i]+'</a></li>'
        }
        _ul.innerHTML = html;
    }
}

得到的数据如图：
可看到 data.s[i]即为数组，可以循环这个数据输出显示为提示内容；
运行

1）、找到接口callback名：http://api.douban.com/book/subjects?q=keyword&alt=xd&callback=elmok

2）、使用script标签创建

btn.onclick = function () {
    if(_q.value !=''){
        var _script = document.createElement('script')
        _script.src = "http://api.douban.com/book/subjects?q="+_q.value+"&alt=xd&callback=elmok"
        document.body.appendChild(_script)
    }
}

2）、开头创建elmok函数使用数据

function elmok(data){
    var msg = document.getElementById('msg')
    var _list = document.getElementById('list')
    msg.innerHTML = data.title.$t + ':'+data['opensearch:totalResults'].$t
    var _entry = data.entry;
    var html = ''
    for(var i=0;i<_entry.length;i++){
        html+='<dl><dt>'+_entry[i].title.$t+'</dt><dd><img src='+_entry[i].link[2]['@href']+' /></dd>'
    }
    _list.innerHTML = html
}

運行

用戶驗證：即時提醒

_username1.onblur = function () {
  ajax('get', 'guestbook/index.php', 'm=index&a=verifyUserName&username=' + this.value, function (data) {
    var d = JSON.parse(data) //數據先轉為objec對像
    verifyUserNameMsg.innerHTML = d.message;
    if (d.code != 0) { //後端定義狀態碼
      verifyUserNameMsg.style.color = 'red'
    } 
    else {
      verifyUserNameMsg.style.color = 'green'
    }
  })
}

用戶註冊：

var password1 = document.getElementById('password1')
var btnReg = document.getElementById('btnReg')
btnReg.onclick = function () {
  ajax('post', 'guestbook/index.php', 'm=index&a=reg&username=' + encodeURI(_username1.value) + '&password=' + password1.value, function (data) {
    var d = JSON.parse(data)
    alert(d.message)
  })
}

更新狀態：

function udpateUserStatus() {
  var uid = getCookie('uid')
  var username = getCookie('username')
  if (uid) {
    _user.style.display = 'block'
    _userinfo.innerHTML = username
    _red.style.display = 'none'
    _login.style.display = 'none'
  } else {
    _user.style.display = 'none'
    _userinfo.innerHTML = username
    _red.style.display = 'block'
    _login.style.display = 'block'
  }
}

//getCookie封裝
function getCookie(key) {
  var arr1 = document.cookie.split('; ')
  for (var i = 0; i < arr1.length; i++) {
    var arr2 = arr1[i].split('=')
    if (arr2[0] == key) {
      return arr2[1]
    }
  }
}

退出：

_logout.onclick = function () {
  ajax('post', 'guestbook/index.php', 'm=index&a=logout', function (data) {
    var d = JSON.parse(data)
    alert(d.message)
    if (!d.code) {
      udpateUserStatus()
    }
  })
  return false
}

發送留言:

btnPost.onclick = function () {
  ajax('post', 'guestbook/index.php', 'm=index&a=send&content=' + encodeURI(content.value), function (data) {
    var d = JSON.parse(data)
    console.log(d);
    if (!d.code) {
      createList(d.data, true)
      udpateUserStatus()
    }
  })
}

顯示留言 ：

function showlist() {
  ajax('post', 'guestbook/index.php', 'm=index&a=getList&n=10&page=' + ipage, function (data) {
    var d = JSON.parse(data)
    console.log(d);
    var data = d.data //注意此處判斷；
    if (data) {
      for (var i = 0; i < data.list.length; i++) {
        createList(data.list[i])
      }
    } else {
      if (ipage == 1) {
        _list.innerHTML = '现在还没有留言，快来抢沙发！'
      }
      showMore.style.display = 'none'
    }
  })
}

創建元素添加到頁面:

function createList(data, insert) {
  var dl = document.createElement('dl')
  var dt = document.createElement('dt')
  var strong = document.createElement('strong')
  strong.innerHTML = data.username;
  dt.appendChild(strong)
  var dd1 = document.createElement('dd')
  dd1.innerHTML = data.content
  var dd2 = document.createElement('dd')
  dd2.className = 't'
  var a1 = document.createElement('a')
  a1.href = 'javascript:;'
  a1.innerHTML = '顶(<span>' + data.support + '</span>)'
  var a2 = document.createElement('a')
  a2.href = 'javascript:;'
  a2.innerHTML = '踩(<span>' + data.oppose + '</span>)'
  dd2.appendChild(a2)
  dd2.appendChild(a1)
  dl.appendChild(dt)
  dl.appendChild(dd1)
  dl.appendChild(dd2)
  if (insert && _list.children[0]) {     //如果有第一條，則插入，否則添加；最新總是顯示第一位
    _list.insertBefore(dl, _list.children[0])
  } else {
    _list.appendChild(dl)
  }
}

顯示更多

var showMore = document.getElementById('showMore')
showMore.onclick = function () {
  ipage++
  showlist()
}

comment_ajax.rar