ajax入门

ajax

ajax，全称是，
Asynchronous [eɪˈsɪŋkrənəs] JavaScript and XML（异步的 JavaScript 和 XML）

XMLHttpRequest对象，主要用它来实现与服务器交换数据

XMLHttpRequest，它的对象的，

- open(),发服务器发起请求，其实就是从服务器要东西
	get/post
	url
	true/false，是否同步

- send( str )，向服务器发送信息，就是发送东西到服务器
	str，是字符串，只是用于post方法

_xmlhttp.open(‘get’, 网址，同步或异步)

不管是open请求，还是send发送，都需要获得服务器的响应。

- text，responseText
	主要是使用这个字符串格式的数据；

- xml，responseXML
	xml格式的响应数据，体积比较大，
	并且解析的时候还需要专门的xml格式的解析。

XMLHttpRequest对象，它有三个属性，
第一个，onreadystatechange 事件，
当 readyState 发生变化时，触发 onreadystatechange

其实中之二，
readyState，
是用来保存着 XMLHttpRequest 对象的状态，
0 - 请求初始化；
1 - 服务已经连接；
2 - 请求已经接收；
3 - 请求处理中
4 - 请求已经完成，且响应已经就绪
在正常情况下，这5个事件的触发顺序是，
0- 1
1- 2
2- 3
3- 4

第三个，status，
服务器的状态，200是一切正常；404是未找到页面，就是不正常。

要操作XMLHttpRequest对象的时候，首先要响应 onreadystatechange 事件，

写法

// 创建XMLHttpRequest对象
        var _xhr = new XMLHttpRequest();

        //响应变化  onreadystatechange .readyState  .status
        _xhr.onreadystatechange = function() {
            if (_xhr.readyState == 4 && _xhr.status == 200) {
                console.log(JSON.parse(_xhr.responseText))
                    //JSON JavaScript对象表示法 是字符串格式,要使用双引号
                    // JSON.parse()将JSON格式的字符串转变为js对象
                var _d = JSON.parse(_xhr.responseText);
                var _doc = document.createElement('h1');
                _doc.innerHTML = _d.txt;
                document.body.appendChild(_doc);

            }
        }

        //发送请求
        // 涉及跨域,url首先要写完整,其次在考虑解决跨域问题的方法
        _xhr.open('get', 'http://127.0.0.1:8888/xx/ajax/get', true)
        _xhr.send()

接口

// 这个js文件是服务端.要解决跨域也是在服务端解决
// 引入express
var express = require('express');
var app = express();
// 解决跨域问题
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});
//接口
app.get('/xx/ajax/get', function(req, res) {
    var _obj = {
        txt: '这是ajax的测试接口数据'
    }
    res.send(_obj)
})
app.listen(8888, function() {
    console.log('8888 ajax测试接口，已经运行了');
})
// No 'Access-Control-Allow-Origin' 这个报错信息就是跨域问题

设置中间件

// 入口文件，设置静态目录，用以访问 .html 文件
var express = require('express');
var app = express();
// 设置静态目录
app.use( express.static('pro_dev') );
app.listen(5699,function(){
	console.log('5699，静态目录，已经运行了');
});

跨域

跨域是指，通过js在不同的域之间进行数据传输或通信。

跨域报错的三种触发条件，
只要协议,域名,端口号其中有一个不同,就是跨域。

1、网址不同；
		www.a.com
		www.b.com
2、端口不同；
	www.a.com:1111，
	www.a.com:1112
3、协议不同；
	http://www.a.com:1234
	https://www.a.com:1234

// 解决跨域问题
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

JSON

JSON: JavaScript Object Notation(JavaScript 对象表示法)
它是跨平台的存储和交换文本信息的语法。比xml更小、更快。

JSON.stringify()
它是把js对象变成JSON字符串；

JSON.parse()
它是把JSON字符串，变成js对象；