ajax

ajax

应用场景:

asynchronous javascript and xml == ajax

1. 在注册一个网站,输入用户名时,
2. ajax其实就是js对象,应用在与服务器进行交互的过程
3. 在搜索框中输入内容,下边会显示一些高频的词汇
4. 局部页面刷新

使用ajax步骤:

1. ajax对象var xhr = new XMLHttpRequest();
2. xhr.open()//1. 请求的方式get post 2.请求的连接地址 3.是异步请求还是同步请求 默认是异步请求 true 同步请求false
3. xhr.send();

总结:

1. 以get方式传递参数请求后台数据
   var xhr = new XMLHttpRequest();
   xhr.open(‘get’, ‘url地址’, ‘是异步还是同步’)
   xhr.send();
2. 以post方式
   var xhr = new XMLHttpRequest();
   xhr.open(‘post’, ‘url地址’, ‘是异步还是同步’)
   xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
   xhr.send(传递后台需要的参数);

ajax对象属性

• responseText: 从后台返回来的json数据
• onreadystatechange:是一个事件, 当ajax的状态发生改变的时候来触发它
• readyState:(0,1,2,3,4)
  0:初始化
  1.执行了open方法\执行send方法
  2.载入完成,接收服务器端的响应数据
  3.解析接收到的服务器端响应数据
  4.数据都已经解析为客户端可用的格式，解析已经完成
• status: 响应成功后返回的状态 一般 200 OK

ajax请求函数封装

encodeURIComponent

同步和异步

• 同步: 当我们请求服务器时,服务器处理完数据之后返回过来,然后与前台一起执行.
• 异步:当我们请求服务器时,服务器自己处理数据,并且前台程序执行没有关系,.前台程序继续往下执行,等后台数据处理完之后再往下执行.
  [注]在实际开发中大多数都用到异步请求

跨域的问题:

• 跨域其实就是跨域名进行请求
  127.0.0.1 和 localhost 不是同一个域名

• 一般情况通过ajax是没办法跨域的;
  现在我们要想进行ajax跨域怎么办?
  答: 我们可以通过两种进行ajax跨域

  1. 方式一:
     在请求的PHP文件中写上header头

     header(‘Access-Control-Allow-Origin:*’);

  2. 方式二:

     在js中自定义一个函数  
     function fn(data)
     {
     	//data是json格式的字符串
     	//转换成对象
     	var obj = JSON.parse(data);
     	console.log(data);
     }
     在js中直接引入这个文件
     <script type="text/javascript" src="http://www.test.com/index.php"></script>
     

配置虚拟主机域名:

1. 修改hosts文件 c://windows/system32/drivers/etc/hosts
2. 修改apache配置文件C:\wamp64\bin\apache\apache2.4.17\conf
3. 修改C:\wamp64\bin\apache\apache2.4.17\conf\extra

<VirtualHost *:80>
ServerName www.test.com
DocumentRoot c:/wamp64/www/test
<Directory “c:/wamp64/www/test/”>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Require local

</VirtualHost>