AJAX-1

1. AJAX

Asynchronous Javascript And XML (异步JavaScript和XML)
通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

2. AJAX的步骤:

  • 创建Ajax对象new XMLHttpRequest()
  • 填写传输地址和传输内容 ajax.open("post"||"get",URL,是否异步)
  • 发送请求 ajax.send();
  • 等待服务器相应 ajax.onload = fn();
  • 服务器响应后执行后续动作 ajax.responseText

例子:

//创建AJAX对象
var ajax = new XMLHttpRequest();
//填写地址
    ajax.open("get","../php/get.php?user=" +userName.value ,true );
//发送地址
ajax.send();
//等待服务器相应
ajax.onload = function () {
//通话
console.log(ajax.responseText);
span.innerHTML = ajax.responseText;
}

3.get

  • 通过url发送请求,会暴露用户信息
  • 因为是用过url发送的,IE的url会将中文转码,所以在IE下中文需要使用encodeURI转码
  • 使用get传输数据会产生缓存,解决方法是在数据后面加随机数或者时间戳
  • 不同浏览器的url长度不同。

例子:

var ajax = new XMLHttpRequest();
ajax.open("get","../php/get.php?user=" +userName.value ,true );
ajax.send();
ajax.onload = function () {
span.innerHTML = ajax.responseText;
}

4.post ,post与get的区别

  • 通过send直接发送到服务器,理论上来说体积是无限大的(一般后端会做限制)

  • 因为是直接发送给服务器,所以不会被浏览器缓存,也不会暴露用户的信息,相对get来说安全

  • 因为不通过浏览器发送,所以不用转码

  • 必须在send之前设置一个请求头(这个请求头的内容是固定的)

    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    
  • 字段的拼接要放进send中,open的第二个参数直接为请地址不用拼接字段了

例子:

var ajax = new  XMLHttpRequest();
ajax.open("post","../php/post.php",true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("user="+this.value);
ajax.onload = function () {
    span.innerHTML = ajax.responseText;
    console.log(ajax.response);
}

5. eval

eval可以计算某个字符串,并执行javascript代码。
通过eval可以将一个长得像对象的字符串转成对象。但是会注入病毒,所以尽量少用或者不用。

var json1 = "{'name':'难'}";
console.log(eval('('+ json1+')'))

你可能感兴趣的:(AJAX-1)