ajax原生态用法

         一、ajax特点：

                            1.局部刷新:不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容

                            2.异步的发送数据

                  

                   二、使用GET请求需要注意的问题

                            1.注意安全性，不要把敏感信息的操作通过GET请求进行。

                            2.注意参数的大小，如果字节数过多，不适合GET请求。

                            3.注意防止XSS攻击及乱码问题，要对URL附带的参数字符进行统一编码处理。

                            4.注意缓存问题，GET请求会自动对数据进行缓存，有时候可能无法及时反映动态结果，可以附加上时间戳字符参数。

                  

                   三、使用POST请求需要注意的问题

                            1.注意设置header的Content-Type为application/x-www-form-urlencode确保服务器知道实体中有参数变量。

                            2.传递的参数数据也是key1=value1&key2=value2的形式。

                            3.如果是上传文件，需要设置Content-Type为multipart/form-data才能让服务器接收到二进制文件数据。

                  

                   四、Ajax和form表单提交区别？

                            1、提交方式

                                     form表单通常是通过在HTML中定义的action，method及submit来进行表单提交，另外也可以通过在js中调用submit函数来进行表单提交。

                                     ajax可以通过封装成XMLHttpRequest对象进行提交。

                           

                            2、页面刷新

                                     Form提交，更新数据完成后，需要转到一个空白页面再对原页面进行提交后处理。哪怕是提交给自己本身的页面，也是需要刷新的，因此局限性很大。

                                     Ajax，$http都可以实现页面的局部刷新，整个页面不会刷新。

                           

                            3、请求由谁来提交

                                     Form提交是浏览器完成的，无论浏览器是否开启JS，都可以提交表单。

                                     Ajax，$http是通过js来提交请求，请求与响应均由js引擎来处理，因此不启用JS的浏览器，无法完成该操作。

                           

                   五、网络信息查看

                            打开浏览器的开发者模式(F12键或者鼠标右键) => Network(可以看到所有的网络加载信息，包括请求时长，请求状态，请求地址，请求服务的端口号，请求类型（post,get）,请求参数（不管是get请求参数还是post的请求参数）)

原生js创建五个步骤

1、使用ajax发送数据的步骤

第一步：创建异步对象

var xhr = new XMLHttpRequest();

第二步：设置 请求行 open(请求方式，请求url):

// get请求如果有参数就需要在url后面拼接参数，
// post如果有参数，就在请求体中传递 xhr.open("get","validate.php?username="+name)
xhr.open("post","validate.php");

第三步：设置请求（GET方式忽略此步骤）头:setRequestHeader()

// 1.get不需要设置
// 2.post需要设置请求头：Content-Type:application/x-www-form-urlencoded
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

第四步：设置请求体 send()

// 1.get的参数在url拼接了，所以不需要在这个函数中设置
// 2.post的参数在这个函数中设置(如果有参数)
xhr.send(null) xhr.send("username="+name);

第五步：让异步对象接收服务器的响应数据

xhr.onreadystatechange = function(){ 
if(xhr.status == 200 && xhr.readyState == 4){ 
 console.log(xhr.responseText);
 }