原生JS Ajax操作

原生JS Ajax（Asynchronous JavaScript And Xml）操作

        如上图所示，这是一种软件前后端分离架构，前端视图就是普通的HTML视图页面，后端就是可以任何语言开发，只需要提供接口访问数据即可。服务器后端提供接口：通常是URL地址，通过访问URL地址，就可以得到JSON数据。

      前后端请求交互：

     1、表单提交
form标签：表单
表单：专门用来进行数据整理和提交
表单元素：用于收集用户输入的数据
提交方式：有8种方式，常见的有两种方式get/post
get方式提交：用于提交不涉及安全性的数据，数据长度受到浏览器的限制，因为get方式提交的数据会显示在url地址中

2、Ajax异步操作

        异步的JavaScript和XML技术
        通过JavaScript中的异步对象XMLHttpRequest来进行数据请求，得到传输的XML数据
        原始的情况下，通过XML进行数据交换，但是由于XML传输数据时大量的语义标签造成了网络流量的损失！
        所以，发展到后来，使用Ajax进行数据交换时，通常使用JSON来进行数据的传递！

 Ajax用在什么地方？
        需要用向服务器请求数据的环境中！
        静态页面开发——不需要Ajax
                登录
                注册
            功能实现——
                注册——向服务器发送用户注册的数据
                登录——向服务器发送用户登录的账号和密码
           操作步骤：
            1. 创建异步对象
            2. 打开和服务器的连接，发送请求
            3. 获取数据，DOM操作进行渲染

                  

                  其中Ajax分为原生JS Ajax操作和JQuery Ajax操作，下面我将就JS Ajax操作进行一下小谈

1）创建XMLHttpRequest对象

var http
if(window.XMLHttpRequest) {
    http = new XMLHttpRequest();
} else {
    http = new ActiveXObject(“microsoft.XMLHTTP”);
}

     2）设置打开和服务器之间的连接，并发送请求

## get方式发送 ##
http.open(“get”, “url”);
http.send();
## post方式发送 ##
http.open(“post”, “url”)
http.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
http.send();

     3）处理返回数据

http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
     // 返回的数据为http.responseText。执行DOM操作渲染数据
}
}