AJAX

AJAX

AJAX(Asynchronous JavaScript And XML)异步的JavaScript和XML,以前使用的是XML格式进行数据交互,现在使用的是JSON格式。AJAX不是一种新技术,而是一种技术方案,可以把发请求这件事变得更加简单,能在不刷新页面的情况下也可以和后端交换数据。

AJAX的核心是XMLHttpRequest对象,所有的操作都是基于他进行的。

如何使用AJAX

  1. 创建ajax对象
    var xhr=new XMLHttpRequest()
  2. 配置ajax对象
    xhr.open('GET','/user',true)
  3. 发送请求
    xhr.send()

常用的属性和方法:

1. open()

xhr.open(method,url,async) 作用是配置ajax对象
– method:GET、POST、DELETE、PUT等
– url:请求的路径
– async:true代表异步,false代表同步,(不写)默认是异步

异步的意思就是不用等到请求完成就直接执行后面的代码

同步的意思是要等到请求结束才可以执行后面的代码,也就是send()方法会一直挂着,知道返回数据才会往下执行

2. send()

xhr.send()作用是发送 HTTP 请求。
– 异步请求(默认为异步请求),则此方法会在请求发送后立即返回
– 同步请求,则此方法直到响应到达后才会返回。
– POST请求,把请求数据作为参数传进去

3. readyState

XMLHttpRequest对象的状态码

描述
0 代理被创建,但尚未调用 open() 方法
1 open() 方法已经被调用
2 send() 方法已经被调用,并且头部和状态已经可获得
3 下载中; responseText 属性已经包含部分数据
4 请求操作已经完成。这意味着数据传输已经彻底完成或失败

4.onreadystatechange

监听readyState的变化,会在 XMLHttpRequest 的readyState 属性发生改变时触发,readystatechange 事件的被调用

5. status

返回了XMLHttpRequest 响应中的数字状态码。在请求完成前,status的值为0。status码是标准的HTTP status codes。例如:status 200 代表一个成功的请求。

代码

//1. 同步代码
//false代表同步,send方法返回数据才会继续往下执行
var xhr=new XMLHttpRequest()
xhr.open('GET','/user',false) 
xhr.send()
var data=xhr.responseText
console.log(data)

//2.异步代码
//请求成功后data才能得到数据
 var xhr=new XMLHttpRequest()
 xhr.open('GET','/user',true)
 xhr.send()
 xhr.onload=function(){
     var data=xhr.responseText
     console.log(data)
 }

//3. 根据status和readyState的值获取数据
 var xhr=new XMLHttpRequest()
 xhr.addEventListener('readystatechange',function(){
     console.log(xhr.readyState)
 })
//1,2,3,4
xhr.open('GET','/user',true)
xhr.send()
xhr.addEventListener('load',function(){
    console.log(xhr.status)
    if(xhr.status===200&&xhr.readyState===4){
            var data=xhr.responseText
            console.log(data)
    }else{
        console.log('error')
    }  
})

//4.post方法发送数据
var xhr=new XMLHttpRequest()
xhr.addEventListener('readystatechange',function(){
    console.log(xhr.readyState)
})
xhr.open('POST','/login',true)
xhr.send('username=xzw&&password=123456')

//5. 封装一个AJAX

function ajax(opts){
    var url = opts.url
    var type = opts.type || 'GET'
    var dataType = opts.dataType || 'json'
    var onsuccess = opts.onsuccess || function(){}
    var onerror = opts.onerror || function(){}
    var data = opts.data || {}

    var dataStr = []
    for(var key in data){
        dataStr.push(key + '=' + data[key])
    }
    dataStr = dataStr.join('&')

    if(type === 'GET'){
        url += '?' + dataStr
    }

    var xhr = new XMLHttpRequest()
    xhr.open(type, url, true)
    xhr.onload = function(){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            //成功了
            if(dataType === 'json'){
                onsuccess( JSON.parse(xhr.responseText))
            }else{
                onsuccess( xhr.responseText)
            }
        } else {
            onerror()
        }
    }
    xhr.onerror = onerror
    if(type === 'POST'){
        xhr.send(dataStr)
    }else{
        xhr.send()
    }
}

ajax({
    url: 'http://yahoo.com/weather.php',
    data: {
        city: '北京'
    },
    onsuccess: function(ret){
        console.log(ret)
    },
    onerror: function(){
        console.log('服务器异常')
    }
})

DOM

DOM

DOM 叫做文档对象模型,把html文档当做一个对象来处理,想要操作文档,只需操作对象的相应的属性就可以了

document对象

document指的是整个html文档,包含html的基本信息

document对象常用属性:
– doctype 文档类型
– title 文档标题
– characterSet 文档编码
– head 文档的head标签
– body 文档的body标签
– images 文档的img标签

document.readyState 当前文档的状态,有三种:
1. loading:加载HTML代码阶段,尚未完成解析
2. interactive:加载外部资源阶段
3. complete:全部加载完成

compatMode 属性返回浏览器处理文档的模式,可能的值为
1. BackCompat:向后兼容模式,也就是没有添加DOCTYPE
2. CSS1Compat:严格模式,添加了DOCTYPE

document.location 是一个只读对象
document.location===window.location===location 三个指的是同一个东西

document.location.href // 返回完整网址
document.location.protocol //网页使用的协议
document.location.host //网址的域名和端口
document.location.hostname // 网址的域名
document.location.port // 网址的端口
document.location.pathname // 网址的路径
document.location.search // 查询参数
document.location.hash // #后面的字符串
document.location.user // "user"
document.location.password // "passed"
document.location.reload(true) // 优先从服务器重新加载
document.location.reload(false) // 优先从本地缓存重新加载(默认值)
document.location.assign('http://www.google.com')
// 跳转到另一个网址,但当前文档不保留在history对象中,
// 即无法用后退按钮,回到当前文档
document.location.toString() // 将location对象转为字符串,等价于document.location.href

document.open() 用于新建一个文档,供write方法写入内容。它实际上等于清除当前文档,重新写入内容
document.close() 用于关闭open方法所新建的文档。一旦关闭,write方法就无法写入内容了。
document.write() 用于向当前文档写入内容。只要当前文档还没有用close方法关闭,它所写入的内容就会追加在已有内容的后面。
1. 如果页面已经渲染完成再调用write方法,它会先调用open方法,擦除当前文档所有内容,然后再写入。
2. 如果在页面渲染过程中调用write方法,并不会调用open方法。

需要注意的是,虽然调用close方法之后,无法再用write方法写入内容,但这时当前页面的其他DOM节点还是会继续加载。

除了某些特殊情况,应该尽量避免使用document.write这个方法

Element对象

Element对象表示HTML元素
Element有几个重要属性
– nodeName:元素标签名,还有个类似的tagName
– nodeType:元素类型
– className:类名
– id:元素id
– children:子元素列表(HTMLCollection)
– childNodes:子元素列表(NodeList)
– firstChild:第一个子元素
– lastChild:最后一个子元素
– nextSibling:下一个兄弟元素
– previousSibling:上一个兄弟元素
– parentNode、parentElement:父元素

获取元素

  1. getElementById 通过id选择元素
  2. getElementsByTagName 通过标签名选择多个元素
  3. getElementsByClassName 通过class获取多个元素,参数可以是多个空格分隔的class名字
  4. getElementsByName 通过name属性获取多个元素
  5. querySelector 返回匹配指定的CSS选择器的元素节点
  6. querySelectorAll 返回匹配指定的CSS选择器的所有节点,参数可以是逗号分隔的多个CSS选择器,返回所有匹配其中一个选择器的元素

创建元素

  1. createElement 方法用来生成HTML元素节点
  2. createTextNode 方法用来生成文本节点,参数为所要生成的文本节点的内容
  3. createDocumentFragment 方法生成一个DocumentFragment对象

DocumentFragment对象是一个存在于内存的DOM片段,但是不属于当前文档,常常用来生成较复杂的DOM结构,然后插入当前文档。这样做的好处在于,因为DocumentFragment不属于当前文档,对它的任何改动,都不会引发网页的重新渲染,比直接修改当前文档的DOM有更好的性能表现。

解决wordpress中文标题页面不显示问题

遇到的问题:

在自定义固定链接时设置%postname%时,如果文章的标题是中文,会出现博客文章不显示的问题

解决方法:

wp-config.php中添加一行:$_SERVER['PATH_INFO'] = '';

诊断出的原因:

使用Apache服务器时,PHP中的变量 _SERVER['REQUEST_URI'] 是没有解码的原始形式,如“index.php/%E6%B5%8B%E8%AF%95”,但 _SERVER['PATH_INFO'] 是解码后的形式“/测试”。由于WordPress通过前者减去后者来判断当前请求的文件,导致此处不能正确解析出index.php。

_SERVER['PATH_INFO']重设后,WordPress能够使用其他方法解析地址。在wp-config.php中添加该语句可防止更新时被重置。